eggheadio-projects/build-complex-layouts-with-css-grid-layout: null

# build-complex-layouts-with-css-grid-layout

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="container">
      <header>Header</header>
      <aside>Aside</aside>
      <section>Section</section>
      <footer>Footer</footer>
    </div>
  </body>
</html>

.container {
  display: grid;
  grid-gap: 10px;
  height: 100vh;
  grid-template-areas:
    "header"
    "section"
    "aside"
    "footer";
  grid-template-rows: 1fr 10fr 1fr 1fr;
}

@media (min-width: 400px) {
  .container {
    grid-template-areas:
      "header section"
      "aside section"
      "aside footer";
    grid-template-rows: 1fr 6fr 1fr;
    grid-template-columns: 1fr 6fr;
  }
}

.container > * {
  background-color: saddlebrown;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

header {
  grid-area: header;
}

aside {
  grid-area: aside;
}

section {
  grid-area: section;
}

footer {
  grid-area: footer;
}