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">
      <nav>Menu 1</nav>
      <nav>Menu 2</nav>
      <nav>Menu 3</nav>
      <section>Main</section>
    </div>
  </body>
</html>

.container {
  display: grid;
  grid-gap: 20px;
  height: 100vh;
  grid-template: [header-top] "nav1 nav2 nav3" 1fr [header-bottom]
                 [main-top]   "main main nav3" 5fr [main-bottom]
                              / 2fr auto 1fr;
}

.container > * {
  background-color: orange;
  font-size: 40px;
}

nav:nth-of-type(1) {
  grid-area: nav1;
}

nav:nth-of-type(2) {
  grid-area: nav2;
}

nav:nth-of-type(3) {
  grid-area: nav3;
}

section {
  grid-area: main;
}