<div class="g">
<div class="i">1</div>
<div class="i">2</div>
<div class="i">3</div>
<div class="i">4</div>
<div class="i">5</div>
<div class="i">6</div>
</div>
.g {
display: grid;
grid-template-columns: 50px 50px;
grid-auto-rows: 50px;
gap: 4px;
}
.i {
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
background-color: red;
}
.i:last-child {
background-color: green;
grid-row-start: 1;
grid-row-end: 3;
}
.i:nth-child(4) {
/* Так как last-child теперь на первом месте и занимает 2 строки, то всё сместилось и четвёртый займёт следующие 2 строки относительно своей текущей позции. */
background-color: blue;
grid-row: span 2
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.