The fr unit is a CSS Grid sizing unit. It divides leftover space among grid tracks after their minimum sizes have been applied, letting columns or rows share available room. section 2.3.4
Use fr values to describe proportional grid tracks:
- grid-template-columns: 1fr gives one column all available space. section 2.3.4
- grid-template-columns: 1fr 1fr 1fr 1fr divides the available space into four equal shares. section 2.3.4
- grid-template-columns: 3fr repeat(3, 1fr) assigns half the space to the first track and divides the remainder among three tracks. section 2.3.4
- grid-template-columns: repeat(2, minmax(auto, 1fr)) 250px creates two equal flexible columns beside a fixed 250-pixel column. section 2.3.1 section 2.3.3
Sharing a cake
Imagine the grid as a whole cake. Four 1fr tracks receive four equal slices. A 3fr track receives three slices while three 1fr tracks receive one slice each, so the first track gets half the cake. section 2.3.4
Listing 2.4 Setting the amount of columns
main {
display: grid;
grid-template-columns: repeat(2, minmax(auto, 1fr)) 250px;
}
Inspect the complete grid declaration combining fr, repeat(), minmax(), auto, and a fixed pixel track. section 2.3.4
