CSS grid - align two rows with different number of columns - css

Question

I have a question related to CSS grid. Let's say I have 2 rows:
First row:
<div class="first-row">
<div>
Col 1
</div>
<div>
Col 2
</div>
<div>
Col 3
</div>
<div>
Col 4
</div>
</div>
Second row:
<div class="second-row">
<div>
<span>Under Col 1</span>
</div>
<div>
<span>Under Col 2</span>
</div>
<div class"SPLIT-THIS">
<span>Under Col 3</span>
<span>Under Col 4</span>
</div>
</div>
How can I split the last div element in second row so the content from the first row is perfectly aligned with content from the second one(like if they were identical rows by structure).
CCS That I used:
.first-row {
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
align-items: center;
justify-content: center;
text-align: center;
}
.second-row {
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
align-items: center;
justify-content: center;
text-align: center;
}

Answer 1

I would implement what is called 'Subgrid' or 'Grid level 2'.
While the container that has both of your initial rows inside is defined in CSS using 'display: grid;', define your 'SPLIT-THIS' with a separate 'display: grid;'.
Then, use 'grid-template-rows: 50%, 50%;' for 'SPLIT-THIS' as well.

Answer 2

First option / approach :
both container would need to have the same amount of column and same size to be matching visually.
The split element then needs to be spanning 2 columns and be itself a grid container .
.first-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: center;
justify-content: center;
text-align: center;
}
.second-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: center;
justify-content: center;
text-align: center;
}
.SPLIT-THIS {
grid-column: span 2;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
div,
.SPLIT-THIS span {
box-shadow: inset 0 0 0 1px
}
<div class="first-row">
<div>
Col 1
</div>
<div>
Col 2
</div>
<div>
Col 3
</div>
<div>
Col 4
</div>
</div>
<div class="second-row">
<div>
<span>Under Col 1</span>
</div>
<div>
<span>Under Col 2</span>
</div>
<div class="SPLIT-THIS">
<span>Under Col 3</span>
<span>Under Col </span>
</div>
</div>
Other options is to redefine the grid-column templates if you wish only 3 col
.first-row {
display:grid;
grid-template-columns: repeat(4, 1fr);
align-items: center;
justify-content: center;
text-align: center;
}
.second-row {
display:grid;
grid-template-columns: 1fr 1fr 2fr ;
align-items: center;
justify-content: center;
text-align: center;
}
.SPLIT-THIS{
display:grid;
grid-template-columns:repeat(2,1fr);
}
div, .SPLIT-THIS span {box-shadow:inset 0 0 0 1px}
<div class="first-row">
<div>
Col 1
</div>
<div>
Col 2
</div>
<div>
Col 3
</div>
<div>
Col 4
</div>
</div>
<div class="second-row">
<div>
<span>Under Col 1</span>
</div>
<div>
<span>Under Col 2</span>
</div>
<div class="SPLIT-THIS">
<span>Under Col 3</span>
<span>Under Col </span>
</div>
</div>