muerwre.github.io/content/CSS/Automatic Grid like Masonry with pure CSS.md

Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns.

$cell: 250px;
$gap: 20px;

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));
  grid-auto-rows: 256px;
  grid-auto-flow: row dense;
  grid-column-gap: $gap;
  grid-row-gap: $gap;
}

Basic elements with double height or width

.h-2 { // takes 2 columns
	grid-column-end: span 2;
}

.v-2 { // takes 2 rows
	grid-row-end: span 2;
}

Header, that fills all columns

.full-width {
  grid-row: 1 / 2; // height: 1 row
  grid-column: 1 / -1;
}

Stamp element, that takes 3 rows in the top right corner

.top-right {
  grid-row: 1 / 3; // height here
  grid-column: -2 / -1; // width here
}