JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="container">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

<div class="layout">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

CSS

.container {
	margin: -10px;
	counter-reset: blocks;
}
.container:after {
	content: "";
	display: block;
	clear: both;
}
.container > * {
	float: left;
	background-color: red;
	min-height: 100px;
	width: calc(25% - 20px);
	margin: 10px;
}
.container > *:after {
	counter-increment: blocks;
	content: counter(blocks);
	display: inline-block;
	margin: 10px;
	color: #FFF;
	font: bold 14px/1 Arial, sans-serif;
}
.container > :nth-child(3) {
	width: calc(50% - 20px);
}

@supports (display: grid) {
	.container {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(12, 1fr);
		margin: 0;
	}

	.container > :nth-child(1n) {
		grid-column: span 3;
		float: none;
		width: auto;
		margin: 0;
	}

	.container > :nth-child(3), .container > :nth-child(5) {
		grid-column: span 6;
	}
}


.layout {
	counter-reset: blocks;
		display: grid;
		grid-gap: 20px;
		grid-template: auto / [left] repeat(9, 1fr) [right] repeat(3, 1fr);
}
.layout:after {
	content: "";
	display: block;
	clear: both;
}
.layout > * {
	background-color: blue;
	min-height: 100px;
	grid-column: left / span 3 ;
}
.layout > *:after {
	counter-increment: blocks;
	content: counter(blocks);
	display: inline-block;
	margin: 10px;
	color: #FFF;
	font: bold 14px/1 Arial, sans-serif;
}

.layout > :nth-child(4) ~ * {
	grid-column: span 3 / right;
}