grid example

by scruffles

HTML

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#container {
  display: grid;
  grid: repeat(2, 51px) / auto-flow 51px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

#container > div:nth-child(1) {
  height: 100px;
  background-color: red;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: span 2;
/*  grid-row-end: 3; */
}

#container > div:nth-child(2) {
  width: 100px;
  background-color: green;
  grid-column-start: 2;
  grid-column-end: span 2;
}