The CSS fr unit sizes a grid track as a fraction of the available space. Three 1fr tracks divide space equally, while larger values receive proportionally more. section 5.1
Equal and proportional columns
A basic grid can use grid-template-columns: 1fr 1fr 1fr for three equal columns. Changing the declaration to 2fr 1fr makes the first column twice as wide as the second. Fraction units also work for rows. section 5.1 section 5.2
Combine fraction units with other track sizes when the layout has fixed and flexible regions:
- Use 300px 1fr for a fixed 300-pixel column followed by a column that fills the remaining space. section 5.1
- Use repeat(3, 2fr 1fr) to repeat a proportional pattern across six tracks. section 5.2
- Use a longer pattern such as 1fr repeat(3, 3fr) 1fr when edge tracks differ from the middle tracks. section 5.2
Listing 5.2 Laying out a basic grid
.grid {
display: grid; #1
grid-template-columns: 1fr 1fr 1fr; #2
grid-template-rows: 1fr 1fr; #3
gap: 0.5em; #4
}
.grid > * {
background-color: darkgray;
color: white;
padding: 2em;
border-radius: 0.5em;
}
Inspect the complete three-column, two-row grid declaration using equal fraction units. section 5.1
