CSS grid with a variable number of "auto" rows, but one row should accept "1fr",

Question

I messed around with a CSS mesh based interface, and repeated behavior is required in different parts of the interfaces:

• A grid with a variable number of rows.
• Each row should have a variable size (auto will do).
• The last line should always occupy all the remaining space.

So in the case when I need five lines, this does the trick:

.myGridForFiveRows { display: grid; grid-template-rows: auto auto auto auto 1fr; } 

However, I would really like the stylesheet to give the correct behavior for any given number of lines. I thought maybe I could use repeat() somehow for this?

https://developer.mozilla.org/en-US/docs/Web/CSS/repeat

 .myGrid { display: grid; grid-template-rows: repeat(auto-fit, auto) 1fr; } 

I played with options repeat(auto-fit, auto) and repeat(auto-fill, auto) , which, unfortunately, are not legitimate CSS, while repeat(4, auto) or repeat(auto-fill, 30px) .

Any idea? This is not something that I can’t get around, but it happens that "display n correctly sorted rows, and then let the last element occupy all the remaining space" is basically the default behavior for all elements in my specification ...

Answer 1

Given your three requirements:

• A grid with a variable number of rows.
• Each row should have a variable size (auto will do).
• The last line should always occupy all the remaining space.

Flexbox is suitable for work. In fact, this may be perfect (depending on your other requirements). I gave an example code below.

But if the Grid Layout is what you want, then I think you will be disappointed. I do not believe Level 1 can do the job.

Closest you can get:

 grid-template-rows: repeat(auto-fit, minmax(auto, 1px)) 1fr; 

But this will not work, because the current mesh specification does not support this syntax.

repeat(auto-fit, auto) 1fr

This is the code you tried. This is not valid since auto and fr cannot be used with auto-fit .

7.2.2.1. Syntax repeat()

Auto repeat ( auto-fill or auto-fit ) cannot be combined with internal or flexible dimensions.

• internal function of determining the size min-content , max-content , auto , fit-content() .

• A flexible dimensional function <flex> ( fr ).

You can get around the auto limit as follows:

repeat(auto-fit, minmax(auto, 1px)) 1fr

minmax(min,max)

Defines a range of sizes greater than or equal to min, and less than or equal to max.

If max <min, then max is ignored and minmax(min,max) treated as min.

As a maximum, the <flex> value sets the flexibility factor of the tracks; it is invalid at least.

This works to properly configure your lines automatically, regardless of whether the default container is set to auto or height / min-height . demo

But it still does not solve the problem of the last line, since 1fr remains invalid and leads to the failure of the whole rule. demonstration

Something like this would be valid:

repeat(auto-fit, minmax(auto, 1px)) 10em

But auto-fit does not work as you expect: 10em applies to the second line. demo

And the rule does not work as expected if the container has height or min-height . demonstration

---

Even when CSS grid layout is now widespread, Flexbox is still the best choice.

This covers all your requirements with clean and simple code:

 article { display: flex; flex-direction: column; height: 100vh; } section:last-child { flex-grow: 1; } section { /* flex-basis: auto <-- this is a default setting */ margin-bottom: 10px; background-color: lightgreen; } body { margin: 0; } 

 <article> <section>text text text</section> <section>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </section> <section>text text text text text text text text text text text text text text text text text text text text text text text text text text text</section> <section>text text text text text text text text text text text text text text text text text text text text text text text text text text text</section> <section>text text text text text text text text text text text text text text text text text text text text text text text text text text text</section> </article>