CSS-only grid

by Federico Tibaldo

HTML

<div class="grid">
  <div class="tile">1</div>
  <div class="tile">2</div>
  <div class="tile">3</div>
  <div class="tile">4</div>
  <div class="tile">5</div>
  <div class="tile">6</div>
</div>

CSS

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 150px 150px;
  grid-template-rows: repeat(calc(6 - 1), 150px); /* Number of children - 1 */
}

.tile {
  width: 100%;
  height: 100%;
  background: yellow;
}

.tile:not(:first-child):not(:last-child) {
  grid-row-start: span 2;
}

.tile:nth-child(even) {
  background: red;
  grid-column: 2;
}