Ian Jones Logo

An Introduction to the `fr` CSS unit | CSS-Tricks


CSS Grid

The fr unit (a “fraction”) can be used when defining grids like any other CSS length such as %, px or em.

This is a pretty typical scenario for a lot of UIs and so using the fr unit prevents us from either making a separate grid div or fumbling about with calc. Because if we didn’t use fr in the example above then we’d somehow have to figure out the following:

the width of each column = ((width of viewport - width of nav) / number of columns) * 1%