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">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
</div>
</body>

</html>

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-rows: 20px 30px 40px 5fr 1fr;
}

.box {
  background-color: dodgerblue;
  font-size: 30px;
}