JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="images">
	<div class="image" style="--w: 800; --h: 530"></div>
	<div class="image" style="--w: 420; --h: 660"></div>
	<div class="image" style="--w: 600; --h: 720"></div>
	<div class="image" style="--w: 780; --h: 630"></div>
	<div class="image" style="--w: 540; --h: 500"></div>
	<div class="image" style="--w: 400; --h: 530"></div>
	<div class="image" style="--w: 320; --h: 450"></div>
	<div class="image" style="--w: 560; --h: 630"></div>
	<div class="image" style="--w: 800; --h: 740"></div>
	<div class="image" style="--w: 300; --h: 240"></div>
	<div class="image" style="--w: 510; --h: 730"></div>
	<div class="image" style="--w: 850; --h: 620"></div>
	<div class="image" style="--w: 240; --h: 360"></div>
	<div class="image" style="--w: 350; --h: 710"></div>
	<div class="image" style="--w: 550; --h: 630"></div>
	<div class="image" style="--w: 620; --h: 720"></div>
	<div class="image" style="--w: 380; --h: 320"></div>
	<div class="image" style="--w: 720; --h: 510"></div>
	<div class="image" style="--w: 440; --h: 620"></div>
	<div class="image" style="--w: 290; --h: 380"></div>
	<div class="image" style="--w: 520; --h: 630"></div>
	<div class="image" style="--w: 820; --h: 550"></div>
	<div class="image" style="--w: 490; --h: 620"></div>
	<div class="image" style="--w: 610; --h: 400"></div>
</div>

CSS

.image {
	--hue-rotation: 82;
	aspect-ratio: var(--w) / var(--h);
	background-color: hsl(
		calc(sibling-index() * var(--hue-rotation))
		100
		50
	);
	display: block;
	width: 100%;
}

.images {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	width: 100%;
}