<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] 1fr [banner-alani-end];
  grid-template-rows:[ust-alan-start] 2fr [ust-alan-end sol-menu-start] 1fr [sol-menu-end icerik-start] 6fr [icerik-end banner-alani-start] 1fr [banner-alani-end alt-alan-start] 2fr [alt-alan-end];
  grid-gap: 15px;
  height: 100vh;
}

@media only screen and (min-width: 1024px) {
  main {
    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];
  }

  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.