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;
}