CSS Grid Masonry

by Génesis García Morilla

HTML

<div short>01</div>
<div short>02</div>
<div tall>03</div>
<div tall>04</div>
<div short>05</div>
<div taller>06</div>
<div short>07</div>
<div tallest>08</div>
<div tall>09</div>
<div short>10</div>

CSS

body {
  display: grid;
  grid-auto-rows: 50px;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

div {
  display: grid;
  align-items: center;
  justify-content: center;
  color: white;
}

[short] {
  grid-row: span 1;
  background-color: green;
}

[tall] {
  grid-row: span 2;
  background-color: crimson;
}

[taller] {
  grid-row: span 3;
  background-color: blue;
}

[tallest] {
  grid-row: span 4;
  background-color: gray;
}