CodePen Home Pure CSS waterfall grid layout

index.html

// credit to: https://codepen.io/michellebarker/pen/RwMWYpb
<div class="grid">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

style.css

* {
	box-sizing: border-box;
}

.grid {
	columns: 18rem;
	gap: 1rem;
	counter-reset: grid;
}

.item + .item {
	margin-top: 1rem;
}

.item {
	break-inside: avoid;
	aspect-ratio: 4 / 3;
	background: pink;
	padding: 1rem;
	border-radius: 0.75rem;
}

.item::before {
	counter-increment: grid;
	content: counter(grid);
}

.item:nth-child(3n) {
	aspect-ratio: 1;
	background: lavender;
}

.item:nth-child(3n - 1) {
	aspect-ratio: 2 / 3;
	background: lightblue;
}