[csswg-drafts] [css-values] Add the `fr` (flexible length) unit for general use as a length unit (#5296)

a2sheppy has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values] Add the `fr` (flexible length) unit for general use as a length unit ==
The `fr` unit [provided by CSS Grid](https://www.w3.org/TR/css3-grid-layout/#fr-unit) is phenomenally useful. With it, you can specify in essence the portion of the "leftover space" that a grid track should occupy. This way, if you have a track that's 5em tall and another that's 60px tall, you can add a track that uses all of the remaining vertical space by specifying a height of `1fr`. If you want to have an element that uses 20% of the leftover space, you can specify a height of `0.2fr`. Then another track of `0.8fr` would use whatever space is still unused at that point, resulting in a container that's completely full vertically.

This would be amazing if it could be generally applied to lengths in CSS. You could then have an element of a fixed height of like `10em` and then throw down an element of height `1fr` that would magically fill the remaining space. And of course fractional heights thereof, just like in the case of grids.

Currently, section 7.2.3 of the Grid Layout spec says that `fr` isn't a length and isn't compatible with lengths, and so forth, but it seems to me that this is something that should change.

While you can theoretically do this using `calc()` and percentage units, the results are mixed at best, and require more maintenance as you apply changes to your styles or add and remove elements in the container.

This would potentially solve a vast array of frustrating and tedious layout issues, would make producing well-structured and reliable stylesheets easier, and would introduce consistency, since having one set of CSS properties support a length unit that the rest of CSS doesn't offer is potentially confusing, and seems like an unnecessary distinction.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5296 using your GitHub account

Received on Tuesday, 7 July 2020 20:22:04 UTC