Grid Columns & fr
Size columns with the flexible fr unit and repeat().
Syntax
grid-template-columns: repeat(3, 1fr);The fr unit represents a fraction of the available space. grid-template-columns: 2fr 1fr makes the first column twice as wide as the second.
The repeat() function avoids repetition: repeat(4, 1fr) creates four equal columns.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer uses repeat(auto-fill, minmax(250px, 1fr)) to create a product grid that automatically adjusts columns based on available width.
- A designer uses the fr unit to give a sidebar 240px and let the main content area take all remaining space with 1fr.
- A developer uses repeat(12, 1fr) to replicate a classic 12-column design grid for pixel-perfect layout alignment.
More examples
fr units for flexible columns
Sets the sidebar to a fixed 240px and lets the main column fill all remaining space with the 1fr unit.
.layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 24px;
}repeat() for even columns
Uses repeat() to create clean 4-column and 12-column grids without writing repetitive fr values.
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 16px;
}auto-fill with minmax for responsive grid
Combines auto-fill with minmax so columns are at least 260px wide and the grid adjusts column count automatically.
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 24px;
}
Discussion