I'm struggling to find a solution for the issue I am facing. Is there a way to adjust each column's row height based on its content in a way that differs from the other column rows?
The code snippet below demonstrates the current setup, which is close to what I need but not quite right. The .recent section starts on row 2 and spans 2 rows, resulting in a total of 4 rows. This causes a large gap below the .middle and .right sections. Here is a screenshot for reference:
https://i.sstatic.net/M30mz.jpg
@dwjohnston provided a screenshot of the grid with your initial solution:
https://i.sstatic.net/sXCXh.jpg
.grid {
display: grid;
grid-template-columns: repeat(11, 1fr);
grid-gap: 20px;
align-items: start;
background: pink;
}
.grid>.left {
grid-column: 1 / span 3;
grid-row: 1;
background: green;
}
.grid>.recent {
grid-column: 1 / span 3;
grid-row: 2 / span 2;
background: red;
}
.grid>.middle {
grid-column: 4 / span 5;
grid-row: 1 / span 2;
background: gray;
}
.grid>.right {
grid-column: 9 / span 3;
grid-row: 1 / span 2;
background: brown;
}<div class="grid">
<div class="left">
Left
</div>
<div class="recent">
Recent
<br> Testing
<br>
</div>
<div class="middle">
Middle
<br><br>
<br><br>
...
<br><br>
</div>
<div class="right">
Right
</div>
</div>