Disclaimer: this article assumes you have some understanding of CSS Grid. If not, the CSS Grid course by Wes Bos (free) and the CSS Grid Guide by CSS-Tricks are both great resources.
TL; DR: when setting a grid template, such as using grid-template-columns
, auto
is "greedy" for left over space except when it's used with fr
units. When auto
is used with fr
, the auto
row(s)/column(s) takes up just enough space to fit its content and any remaining space is given to the row(s)/columns(s) defined with fr
units.
Note: All the examples in this post are available on Codepen
What is the fr
unit?
The fr
unit represents a fraction of the available space in the grid container. For example setting grid-template-columns: 1fr 1fr 1fr;
would create three equally sized columns that grow and shrink with the container. Also, fr
can be greater than 1, like grid-template-columns: 2fr 1fr;
which sets the first column to be twice as wide as the second column
What does auto
mean in CSS grid?
The auto
keyword means to take up the available space to fit the content. If there's space left over then auto
is "greedy"; it will take up space to fit the content plus the maximum left over space it can take (EXAMPLE 1). The exception is if auto
is used with fr
. If min-width
/min-height
is set on the grid item then the column would be at the smallest the size set by min-width
/min-height
(EXAMPLE 2)
When auto
and 1fr
have the same effect
If the grid item's contents takes up the same amount of space then auto
and 1fr
has the same effect, which is to evenly take up the available space (EXAMPLE 3)
Using auto
and fr
together
If auto
and fr
are used together to define the grid template then auto
will take up the space it needs for the content. And the remaining space is divided up to the column(s)/row(s) defined by fr
units. The auto
defined column(s)/row(s) won't get any more of the leftover space. (EXAMPLE 4)
References
Cover image: by Sharon McCutcheon on Unsplash
Top comments (0)