grid layout

by tomik23

HTML

<div class="container">
  <header class="pageHeader">Header</header>
  <div class="pageArticle">Article</div>
  <nav class="pageNav">Nav</nav>
  <div class="pageAds">Ads</div>
  <footer class="pageFooter">Footer</footer>
</div>

CSS

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: Proxima Nova Regular, Segoe UI, Roboto, Droid Sans, Helvetica Neue, Arial, sans-serif;
  font-size: 20px;
}

.container {
  max-width: 1140px;
  display: grid;
  grid-template-areas: "header header ads" "nav article article" "footer footer footer";
  grid-template-rows: 80px 1fr 70px;
  grid-template-columns: 20% 1fr 15%;
  grid-gap: 10px;
  height: 100vh;
  margin: auto;
  padding: 0;
}

header,
footer,
article,
nav,
div {
  padding: 1rem;
  background: yellowgreen;
}

.pageHeader {
  grid-area: header;
  background-color: red;
}

.pageFooter {
  grid-area: footer;
  background-color: blue;
}

.pageArticle {
  grid-area: article;
  background-color: salmon;
}

.pageNav {
  grid-area: nav;
  background-color: slateblue;
}

.pageAds {
  grid-area: ads;
  background-color: wheat;
}

@media (max-width: 575px) {
  .container {
    grid-template-areas: "header" "article" "nav" "ads" "footer";
    grid-template-rows: 80px 1fr 70px 70px 70px;
    grid-template-columns: 1fr;
  }
}