The CSS Grid fr unit represents a fraction of the free space in a grid container. Use it in grid-template-columns or grid-template-rows to let tracks expand instead of locking them to pixel widths. section 13.4
Think of fr as sharing whatever space is left:
- A single 1fr column takes all available free horizontal space. section 13.4
- A 1fr and 3fr pair divides the free space into 25% and 75%. section 13.4
- For rows, give the grid container an explicit height, such as 100vh; otherwise there may be no free vertical space to divide. section 13.4
A fixed column, another fixed column, then the leftovers
Set the first two columns to 100px and 200px, then let the final column claim the remaining space: grid-template-columns: 100px 200px 1fr;. For a more flexible three-column layout, use repeat(3, 1fr). section 13.4 section 14.3
.container {
display: grid;
grid-template-columns: 100px 200px 1fr; #1
grid-template-rows: 100px 150px;
}
Inspect the complete grid declaration showing fixed tracks beside an fr track that absorbs the remaining width. section 13.4
