How to create CSS grid system with merged cells - css

Question

I'm trying to achieve the following layout:
As you can see, the cards in the middle column occupy multiple grids, in order to give it that effect.
What I have:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
". . ."
". . ."
". . .";
}
.grid-item {
border: 1px solid black;
}
.grid-item:nth-child(3) {
grid-column: 2;
grid-row: 2;
}
.grid-item:nth-child(4) {
grid-column: 2;
grid-row: 3;
}
.grid-item:nth-child(5) {
grid-column: 2;
grid-row: 4;
}
.grid-item:nth-child(6) {
grid-column: 3;
grid-row: 1;
}
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
</div>
However, my approach definitely isn't the most sustainable, nor are my cards rendering in the correct order (cards go from 1, 7, 2, 3 etc ..).
I haven't seen an approach where using CSS grid, a layout like the image has been achieved, so wondering if CSS grid is the best solution here?

Answer 1

To achieve this you mostly have to change the behavior of your grid container.
Adding grid-auto-flow: column; fixes the issue of the elements moving in rows.
Doubling the number of rows means that you can work "by halves" when positioning our elements.
On the grid elements, adding grid-row: span 2 sets them to occupy a whole area in your design
Then all you have to do is tell the first one and second to last one to start on the second row.
If you were going to iterate this over more than 3 columns, it would by every 7th element minus the first one ( .grid-item:nth-child(7n-1)) instead of nth-to-last. In that case, you'd also have to define your grid differently, similar to below.
grid-template-rows: repeat( 6, auto );
grid-auto-columns: 1fr;
You can also remove the grid-area definition.
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(6, auto);
grid-auto-flow: column;
gap: 0px 0px;
}
.grid-item {
border: 1px solid black;
grid-row: span 2;
}
.grid-item:nth-child(1), .grid-item:nth-last-child(2) {
grid-row: 2 / span 2;
}
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
</div>