I am working on a grid layout with 3 columns and a variable number of rows. The background of the grid is colored, but when there are not enough rows to fill the vertical space, it remains uncolored:
.grid {
align-self: flex-start;
display: grid;
grid-template-columns: min-content 2fr 1fr;
grid-gap: 0px;
}
.index, .title {
background: red;
padding: 0 2vw 0 1vw;
}
.ticker {
background: yellow;
}
<div class="grid">
<div class="index">1</div>
<div class="title">Pigs are cute</div>
<div class="ticker">blah blah</div>
<div class="index">2</div>
<div class="title">Horses rise at night</div>
<div class="ticker">bleh bleh</div>
<div class="index">3</div>
<div class="title">Cats run in packs</div>
<div class="ticker">blih blih</div>
</div>My goal is to have this remaining vertical space also colored like the rest of the grid. I tried setting the height of the grid to 100vh, but that stretches each row's height which is not what I want since I need the row height to adapt to content.
.grid {
align-self: flex-start;
display: grid;
grid-template-columns: min-content 2fr 1fr;
grid-gap: 0px;
height: 100vh;
}
.index, .title {
background: red;
padding: 0 2vw 0 1vw;
}
.ticker {
background: yellow;
}<div class="grid">
<div class="index">1</div>
<div class="title">Pigs are cute</div>
<div class="ticker">blah blah</div>
<div class="index">2</div>
<div class="title">Horses rise at night</div>
<div class="ticker">bleh bleh</div>
<div class="index">3</div>
<div class="title">Cats run in packs</div>
<div class="ticker">blih blih</div>
</div>I am looking for a CSS grid solution that expands the grid vertically while keeping row height dynamic. Alternatively, a JavaScript solution adding blank rows until reaching window height would work too.
A flex approach doesn't suit my needs as I require a grid-like layout where columns and rows stay aligned.
Thanks!