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>
  </body>
</html>

.container {
  display: grid;
  grid-gap: 10px;
  height: 100vh;
  grid-template-columns: repeat(
    auto-fit,
    minmax(100px, auto)
  );
}

.box {
  background-color: khaki;
  font-size: 40px;
}