JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div class="layout-scale">
	<div class="layout-scale__items">1</div>
	<div class="layout-scale__items">2</div>
	<div class="layout-scale__items">3</div>
	<div class="layout-scale__items">4</div>
	<div class="layout-scale__items">5</div>
	<div class="layout-scale__items">6</div>
	<div class="layout-scale__items">7</div>
	<div class="layout-scale__items">8</div>
	<div class="layout-scale__items">9</div>
	<div class="layout-scale__items">10</div>
	<div class="layout-scale__items">11</div>
	<div class="layout-scale__items">12</div>
	<div class="layout-scale__items">13</div>
	<div class="layout-scale__items">14</div>
	<div class="layout-scale__items">15</div>
	<div class="layout-scale__items">16</div>
	<div class="layout-scale__items">17</div>
	<div class="layout-scale__items">18</div>
	<div class="layout-scale__items">19</div>
	<div class="layout-scale__items">20</div>
	<div class="layout-scale__items">21</div>
	<div class="layout-scale__items">22</div>
	<div class="layout-scale__items">23</div>
	<div class="layout-scale__items">24</div>
	<div class="layout-scale__items">25</div>
	<div class="layout-scale__items">26</div>
	<div class="layout-scale__items">27</div>
	<div class="layout-scale__items">28</div>
	<div class="layout-scale__items">29</div>
	<div class="layout-scale__items">30</div>
	<div class="layout-scale__items">31</div>
	<div class="layout-scale__items">32</div>
	<div class="layout-scale__items">33</div>
	<div class="layout-scale__items">34</div>
	<div class="layout-scale__items">35</div>
	<div class="layout-scale__items">36</div>
	<div class="layout-scale__items">37</div>
	<div class="layout-scale__items">38</div>
	<div class="layout-scale__items">39</div>
	<div class="layout-scale__items">40</div>
	<div class="layout-scale__items">41</div>
	<div class="layout-scale__items">42</div>
	<div class="layout-scale__items">43</div>
	<div class="layout-scale__items">44</div>
	<div class="layout-scale__items">45</div>
	<div...

SCSS

.layout-scale {
	display: grid;
	grid-template-columns: repeat(4, 25%);
	grid-gap: 1rem;
}

.layout-scale__items {
	background-color: aqua;
	min-height: 10rem;
}

.layout-scale__items:nth-child(10n + 1) {
	background-color: deeppink;
	grid-column: span 2;
	grid-row: span 2;
}

.layout-scale__items:nth-child(10n + 10) {
	background-color: lime;
	grid-column: 3 / span 2;
}

$increment: 3;
@for $i from 1 through 10 {
	.layout-scale__items:nth-child(#{$i*10}) {
		grid-row: #{$increment} / span 2;
	}
	$increment: $increment + 4;
}