CSS Grid Tutorial

by Vince

HTML

<div id="grid-container">
  <div class="grid-items header"></div>
  <div class="grid-items main"></div>
  <div class="grid-items"></div>
  <div class="grid-items sidebar"></div>
  <div class="grid-items footer"></div>
</div>

CSS

.header {
  grid-area: header;
  background-color: blue;
 }
.main {
  grid-area: main;
  background-color: yellow;
 }
.sidebar {
  grid-area: sidebar;
  background-color: red;
 }
.footer {
  grid-area: footer;
  background-color: green;
 }
#grid-container {
  display: grid;
  background-color: #EEE;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
  grid-gap: 10px 10px;
}
.grid-items {
  display: block;
  outline: 1px dotted pink;
  padding: 1em;
}

JavaScript

/* CSS Grid Tutorial */
/* https://css-tricks.com/snippets/css/complete-guide-grid/ */