<div class="container-fluid">
<div class="row my-grid">
<div class="col">1 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">2 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">3 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">4 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">5 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">6 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">7 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">8 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">9 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">10 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">11 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">12 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">13 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">14 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">15 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">16 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">17 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">18 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">19 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
<div class="col">20 Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
</div>
</div>
.my-grid {
.col {
border: 5px solid white;
background: lime;
padding: 10px 20px;
flex-basis: percentage(1/3);
&:nth-child(6n + 4),
&:nth-child(6n + 5),
&:nth-child(6n + 6){
flex-basis: 100%;
background: green;
color: #fff;
}
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.