Linked partially to Removing empty space in CSS Grid, with specific adjustments I am aiming for.
Essentially, I want my rows and columns to expand and contract based on the content present. In this CodePen example, you can observe that the content of the blue section spills over into the pink footer instead of pushing it down as intended. The same issue would occur if the red section had substantial content.
The top green section should also adjust its height dynamically. And in cases where there is no content (such as an empty green section), the red bottom section should move up to fill the vacant space.
Any thoughts on how to achieve this?
Here is a snippet of the structure:
<div class="grid">
<div class="top">top<br/>top second line<br/></div>
<div class="right">
a <br/>
a <br/>
... // truncated for brevity
</div>
<div class="bottom">
bottom
</div>
</div>
<div class="footer">Footer</div>
And here is the current CSS styling:
.grid {
display: grid;
grid-template-columns: 645px 316px;
grid-template-rows: repeat(25, 10px);
grid-column-gap: 20px;
}
.top {
grid-column: 1 / 2;
grid-row: 1 / 4;
background-color: green;
}
.right {
grid-column: 2;
grid-row: 1 / -1;
background-color: blue;
}
.bottom {
grid-column: 1;
grid-row: 6 / -1;
background-color: red;
}
.footer {
width: 100%;
height: 50px;
background-color: pink;
}