CSS Grid

by Dominik Wilk

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Grid</title>
  </head>
  <body>
    <div class="container">
      <div class="item-a item">a</div>
      <div class="item-b item">b</div>
      <div class="item-c item">
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      </div>
      <div class="item-d item">d</div>
    </div>
  </body>
</html>

SCSS

body {
  min-height: 100vh;  
  background: black;
}

.container {
  grid-template-columns: 200px auto 50px 50px;
  grid-template-rows: 50px auto 100px;
  grid-template-areas: 
    "header header header header"
    "sidebar main main main"
    "footer footer footer footer";
  display: grid;
  justify-content: stretch;
}

.item {
  &.item-a {
    grid-area: header;
    background: red;
  }

  &.item-b {
    grid-area: main;
    background: blue;
  }

  &.item-c {
    grid-area: sidebar;
    background: green;
  }

  &.item-d {
    grid-area: footer;
    background: pink;
  }
}