<div class="grid-container">
<div style="order:1">1) Col 1 row 1<br>
test<br>
test<br>
test</div>
<div style="order:3">2) Col 1 row 2</div>
<div style="order:5">3) Col 1 row 3<br>
test<br>
test</div>
<div style="order:7">4) Col 1 row 4</div>
<div style="order:9">5) Col 1 row 5<br>
test<br>
test</div>
<div style="order:11">6) Col 1 row 6</div>
<div style="order:2">7) Col 2 row 1<br>
test</div>
<div style="order:4">8) Col 2 row 2<br>
test<br>
</div>
<div style="order:6">9) Col 2 row 3<br>
test<br>
<br>
test<br>
test</div>
<div style="order:8">10) Col 2 row 4</div>
<div style="order:10">11) Col 2 row 5<br>
test<br>
test <br>
test<br>
test</div>
<div style="order:12">12) Col 2 row 6</div>
</div>
.grid-container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(
auto-fill,
minmax(120px, 50%) minmax(120px, 50%)
);
background-color: #2196f3;
padding: 10px;
}
.grid-container > div {
text-align: center;
font-size: 30px;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.