<h1>Not Mondrian</h1>
<div class="grid">
	<div class="cell"></div>
	<div class="cell"></div>
	<div class="cell"></div>
	<div class="cell"></div>
	<div class="cell"></div>
	<div class="cell"></div>
	<div class="cell"></div>
	<div class="cell"></div>
	<div class="cell"></div>
	<div class="cell"></div>
	<div class="cell"></div>
</div>

<footer>
	<p>🎉 Chrome 107 now supports interpolations of the CSS <code>grid-template-rows</code> and <code>grid-template-columns</code> properties, joining Firefox and Safari in support.</p>
	<div class="warning"><p>ℹī¸ You are using Chrome but need at least version 107 to check this demo</p></div>
</footer>
@keyframes animate-columns {
	0% {
		grid-template-columns: 10em 1em 3em 1em;
		grid-template-rows: 10em 1em 3em 1em;
	}
	25% {
		grid-template-columns: 1em 9em 3em 2em;
		grid-template-rows: 2em 6em 4em 3em;
	}
	50% {
		grid-template-columns: 5em 4em 3em 3em;
		grid-template-rows: 8em 1em 3em 3em;
	}
	75% {
		grid-template-columns: 10em 1em 3em 1em;
		grid-template-rows: 10em 1em 3em 1em;
	}
	100% {
		grid-template-columns: 10em 1em 3em 1em;
		grid-template-rows: 2em 6em 4em 3em;
	}
}

.grid {
	display: grid;
	gap: 0.5em;
	padding: 0.5em;
	grid-template-columns: 10em 1em 3em 1em;
	grid-template-rows: 10em 1em 3em 1em;
	align-items: stretch;
	justify-items: stretch;
	background: #333;
	
	width: min-content;
	margin: 0 auto;
	
	animation: animate-columns 20s ease-in-out infinite alternate;
}

.grid:hover {
	animation-play-state: paused;
}

.grid > * {
	width: 100%;
	aspect-ratio: 1;
	background: rgb(0 0 0 / 0.1);
}

.grid > :nth-child(1n) {
	background: #4285F4;
}
.grid > :nth-child(2n) {
	background: #34A853;
}
.grid > :nth-child(3n) {
	background: #EA4335;
}
.grid > :nth-child(4n),
.grid > :nth-child(13n){
	background: #FBBC05;
	grid-column: span 2;
}
.grid > :nth-child(9n) {
	background: #34A853;
	grid-row: span 2;
}
.grid > :nth-child(10n) {
	background: #EA4335;
	grid-column: span 2;
}
.grid > :nth-child(3) {
	grid-column: span 2;
}

html,
body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

body {
	display: grid;
	place-content: center;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

footer {
	margin: 2em auto 0;
	max-width: 60ch;
}

.warning {
	display: none;
}
const showWarningInChromiumWithNoSupport = () => {
	if (!navigator.userAgentData || !navigator.userAgentData.brands) return;

	const chromium = navigator.userAgentData.brands.filter(b => b.brand == 'Chromium');
	if (!chromium) return;

	if (chromium[0].version >= 107) return;
	
	document.querySelector('.warning').style.display = 'block';
}

showWarningInChromiumWithNoSupport();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.