CSS网格填充100vh而不影响行高

Question

I have a grid with 3 columns and a variable/dynamic number of rows. The grid has a colored background and when there are NOT enough rows as to vertically fill the window, the remaining, empty vertical space is un-colored:

 .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> 

I would like this vertical space to be colored as the grid is. The apparently obvious solution is to give the grid a height of 100vh. But this expectedly stretches each row's height accordingly, which is not the result I am looking for, as I need 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> 

Is there any CSS grid way of expanding the grid vertically while still allowing row height to adapt to content?

An alternative javascript solution, such as adding blank rows to the grid until grid's height is >= the height of the window would also be acceptable.

A flex solution is, I believe, not acceptable, as I need a grid-like behaviour where columns and rows remain aligned.

Thank you

Answer 1

Since different columns have different colors, extending the grid would not work, because the grid itself can't have two different colors. This means only expanding the rows or adding new rows would work.

Since one of the question's requeriments is to leave row height untouched, and as per this question , adding an extra row and expanding only that row to take the remaining space is not possible with CSS grid (but flexbox), the only solution seems to add rows via JS until the grid height is >= window height :

 var rowHeight = window.getComputedStyle(document.querySelector('.grid').firstElementChild).height; var row = "<div class='index' style='height:"+ rowHeight +"'></div><div class='title' style='height:"+ rowHeight +"'></div><div class='ticker' style='height:"+ rowHeight +"'></div>"; while (parseFloat(window.getComputedStyle(document.querySelector('.grid')).height) < window.innerHeight) { document.querySelector('.grid').innerHTML += row; } 

 html, body { margin: 0; padding: 0; } .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>