First row a finite size, variable remaining rows equal portions of remaining space?

Question

I'm attempting to have a CSS Grid in which the grid-template-rows have the following definition:

.grid-container {
  display: grid;
  grid-template-rows: 20px repeat(auto-fill, 1fr);
}

Now obviously, the above doesn't work. I hope that my erroneous code shows what I'm intending to do well enough. To put it in English: first row I want to be (for sake of example) 20 pixels in height; the variable (non-definite; could be 2, could be 20) remaining rows should be equal portions of the remaining height. Can someone tell me why the above doesn't work, and what (if anything) will do what I'm intending?

score 1 · Accepted Answer · answered Aug 26 '19 at 12:55

Since only the first row is definite, you don't need to use grid-template-rows to define all rows that may exist in the grid.

The first row can exist in the explicit grid (sized by grid-template-rows).

The remaining rows can exist in the implicit grid (sized by grid-auto-rows).

Instead of this:

.grid-container {
  display: grid;
  grid-template-rows: 20px repeat(auto-fill, 1fr);
}

Try this:

.grid-container {
  display: grid;
  grid-template-rows: 20px;
  grid-auto-rows: 1fr; /* also try `auto` (which is the default) */
}

Also see: Equal height rows in CSS Grid Layout

Really sorry I never got back to up-voting or selecting your answer, @Michael Benjamin! Just did so. — Paul Bruno, Mar 27 '22 at 18:52

First row a finite size, variable remaining rows equal portions of remaining space?

1 Answers1