<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.box {
background: #000;
}
.box:nth-child(2) {
background: red;
}
.box:nth-child(3) {
background: green;
}
.box:nth-child(4) {
background: blue;
}
.grid {
height: 100vh;
display: grid;
grid: auto / repeat(auto-fit,minmax(50%,1fr));
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.