The CSS Grid specification introduced a new unit for CSS. This is the fr unit and if you already use flexbox you’ll see it behaves in a similar way to how flex-grow behaves when you set flex-basis to 0.
The spec describes the fr unit as,
“A flexible length or
is a dimension with the fr unit, which represents a fraction of the free space in the grid container."
– https://drafts.csswg.org/css-grid/#fr-unit
In this video from my video series, find out how to use the fr unit.
What is this?
I’m sharing some tips to help you learn Grid Layout from the 1st of December until Christmas. Edited highlights from the things on this site and that I’ve posted elsewhere. Follow along!
If you find this style of learning useful then you might enjoy my online CSS Layout Workshop. I’m also available for in-house training, workshops and consultancy or conference speaking.