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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  
  <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="left-sidebar">Left Sidebar</div>
    <div class="main-content">Main Content</div>
    <div class="right-sidebar">Right Sidebar</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

.container {
  display: grid;
  grid-template-columns:
    [left-sidebar-start] 1fr
    [left-sidebar-end main-content-start] 2fr
    [main-content-end right-sidebar-start] 1fr
    [right-sidebar-end];
  
  grid-template-rows:
    [body-start] 6fr
    [body-end footer-start] 2fr
    [footer-end];
    
  height: 100vh;
  grid-gap: 15px;
}

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

.footer {
  grid-column: main-content-start / right-sidebar-end;
}

.left-sidebar {
  grid-row: body-start / footer-end;
}