<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
<div class="item">19</div>
<div class="item">20</div>
<div class="item">21</div>
<div class="item">22</div>
<div class="item">23</div>
<div class="item">24</div>
<div class="item">25</div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.item {
background: orange;
height: 4rem;
}
.item:nth-child(10n + 1) {
background: gray;
grid-column-start: 1;
}
.item:nth-child(10n + 6) {
grid-column-start: 3;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.