css grid to fill 100vh without affecting row height

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

Just make sure there's always at least one row at the bottom that takes up the remaining space. — Heretic Monkey, Sep 08 '19 at 21:26
@HereticMonkey thanks, how would I make a single row take the remaining space? — Jaume Mal, Sep 08 '19 at 21:30
Possible duplicate of [CSS Grid with variable number of "auto" rows, but one row should take "1fr"](https://stackoverflow.com/questions/48339333/css-grid-with-variable-number-of-auto-rows-but-one-row-should-take-1fr) — Heretic Monkey, Sep 08 '19 at 21:43
@HereticMonkey the only answer there seems to say there is no way to do what you are telling me to do (make the last row to take the remaining space) with css grid, suggesting flexbox. But as explained in my question, as far as I can see, flexbox won't work. — Jaume Mal, Sep 08 '19 at 21:58
The accepted answer on that question shows flexbox working... — Heretic Monkey, Sep 08 '19 at 22:03
Sorry if I am misunderstanding, but I need columns to stay aligned across rows, which I don t think is possible with flexbox and dynamic content. — Jaume Mal, Sep 08 '19 at 22:10
This can't work as the background color is not on the grid itself but the elements inside the grid. So, even adding an extra row to the bottom, i.e. `grid::after`, won't help as it will only have one color. — Paul, Sep 09 '19 at 09:18
@Paul that seems to be right; which would only leave programatically adding rows as a possible solution, thank you — Jaume Mal, Sep 09 '19 at 11:58

score 0 · Answer 1 · answered Sep 09 '19 at 12:50

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>

css grid to fill 100vh without affecting row height

1 Answers1