The fr Unit and Repeat
Use the fractional fr unit and the repeat() function to create flexible grid tracks.
What is the fr Unit?
The fr (fraction) unit is exclusive to CSS Grid. It represents a fraction of the remaining free space in the grid container after all non-flexible tracks are sized.
Simple fr Example
Two equal columns each getting half the available space:
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}All lessons in this course
- Display Grid and Template Columns Rows
- The fr Unit and Repeat
- Gap and Grid Placement
- Grid Template Areas