cheatsheets

Summarised from here:

div.container {
  display: grid;
  grid-template-columns: 3;
  grid-template-rows: 3;
}
div.top {
  background-color: purple;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-start: 1;
}
div.bottom {
  background-color: yellow;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-start: 3;
}
div.left {
  background-color: blue;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 2;
  grid-row-start: 2;
}
div.right {
  background-color: red;
  grid-column-start: 3;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-start: 2;
}
div.content {
  background-color: #ffa;
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-start: 2;
}

for the html

<div class="container">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
<div class="bottom"></div>
</div>