grid-masonry.css

// ┌────────────┐
// │ CSS Grid:  │
// │ Good for   │
// │ spanning   │
// │ horizontal │
// └────────────┘
.masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: $gutter;
  grid-auto-rows: minmax($baseline, auto);
  grid-auto-flow: dense;
}
.masonry-item:nth-child(3) {
  grid-column: 3 / 5;
}
.masonry-item:nth-child(10) {
  grid-column: 1 / 3;
}