Join Morten Rand-Hendriksen for an in-depth discussion in this video Get to know the fr unit, part of CSS Grid: First Look.
- View Offline
- [Voiceover] With the CSS grid specification comes…a new unit, the Flexible Length or fr unit.…According to the specification, which is pretty chunky,…the fr unit represents a fraction of the free space…in the grid container.…The distribution of free space occurs after…all nonflexible track sizing functions…have reached their maximum.…It goes on to say, the total size of such rows and columns…is subtracted from the available space, yielding…the free space, which is then…divided among the flex-sized rows and columns…in proportion to their flex factor.…
Or, in plain English, that means…in a grid where some lines have fixed sizing…set with pixels, M's, percentage, etc.…the remaining space is divided up based on…fractions defined by the fr unit.…This all makes way more sense if you see an example.…In the playground lets set the width of the grid…to 1,000 pixels.…I'll also add a border around everything.…And central line the grid using margins.…
Now I want to create five equal width columns…inside my grid.…I can do that by simply setting each of the columns…
Join Morten Rand-Hendriksen in this course for a first look at this emerging CSS module. He covers setting up CSS grids, positioning content, and working with named lines and template areas. The final videos in the course introduce practical uses for CSS grids, including online magazines and three-column layouts.
- What is CSS Grid?
- Using the CSS Grid playground
- Setting up a CSS grid
- Positioning content in a CSS grid
- Using template areas in a CSS grid
- Creating a responsive grid layout