JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="grid">
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child child-new"></div>
	<div class="child child-new"></div>
	<div class="child child-new"></div>
	<div class="child child-new"></div>
	<div class="child child-new"></div>
	<div class="child child-new"></div>
	<div class="child child-new"></div>
	<div class="child child-new"></div>
	<div class="child child-new"></div>
	<div class="child child-new"></div>
	<div class="child child-new"></div>
	<div class="child child-new"></div>
</div>

SCSS

.grid {
	display: grid;
	grid-template-columns: repeat(8, 3rem);
}

.child {
	background: red;
	height: 3rem;
	width: 100%;
}

.child-new {
	background: blue;
	.child:not(#{&}) + & {
		grid-column-start: 1;
	}
}