<main>
  <header>Header</header>
  <aside>Sol menü</aside>
  <div class="content">İçerik</div>
  <div class="banner">Banner alanı</div>
  <footer>Footer</footer
</main>
main {
  display: grid;
  grid-template-columns: [sol-menu-start] 3fr [sol-menu-end icerik-start] 5fr [icerik-end banner-alani-start] 2fr [banner-alani-end];
  grid-template-rows:[ust-alan-start] 3fr [ust-alan-end icerik-start] 6fr [icerik-end alt-alan-start] 2fr [alt-alan-end];
  grid-gap: 15px;
  height: 100vh;
}

main header {
  grid-column: sol-menu-start / banner-alani-end;
  grid-row: ust-alan-start / icerik-start;
}

main footer {
  grid-column: sol-menu-start / banner-alani-end;
  grid-row: alt-alan-start / alt-alan-end;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Merriweather Sans', sans-serif;
}

main > * {
  background-color: lightblue;
  font-size: 24px;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Merriweather+Sans:300,800

External JavaScript

This Pen doesn't use any external JavaScript resources.