Each length value listed defines one column's width, so grid-template-columns: 200px 1fr 1fr creates exactly three columns, a fixed 200px first column followed by two equally-sized flexible columns sharing the remaining space evenly. The fr unit represents a fraction of the grid container's remaining available space after any fixed-size tracks have been subtracted, making it especially useful for flexible, responsive column sizing, and the repeat() function, like repeat(3, 1fr), provides a more concise shorthand for defining several identically-sized columns without listing 1fr three separate times.
1Understanding Grid-template-columns
Each length value listed defines one column's width, so grid-template-columns: 200px 1fr 1fr creates exactly three columns, a fixed 200px first column followed by two equally-sized flexible columns sharing the remaining space evenly. The fr unit represents a fraction of the grid container's remaining available space after any fixed-size tracks have been subtracted, making it especially useful for flexible, responsive column sizing, and the repeat() function, like repeat(3, 1fr), provides a more concise shorthand for defining several identically-sized columns without listing 1fr three separate times.
Use repeat(auto-fit, minmax(200px, 1fr)) for a common, genuinely responsive grid pattern that automatically fits as many 200px-minimum-width columns as will comfortably fit the container, without needing a separate media query breakpoint for each screen size.
.grid {
display: grid;
grid-template-columns: 200px 1fr 1fr;
}2Practical Example
Here is a real-world application of Grid-template-columns showing how it is used in production CSS code.
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}3Best Practices
Follow these guidelines when working with Grid-template-columns:
1. Use the fr unit for flexible columns that should share the container's available space proportionally, rather than fixed pixel widths that don't adapt to different container sizes
2. Use repeat() for concisely defining several columns of the same size, rather than manually listing that same size value multiple times
3. Combine repeat(auto-fit, minmax(...)) for a responsive grid that automatically adjusts its number of columns based on available space, without needing explicit media query breakpoints
Tip: Use repeat(auto-fit, minmax(200px, 1fr)) for a common, genuinely responsive grid pattern that automatically fits as many 200px-minimum-width columns as will comfortably fit the container, without needing a separate media query breakpoint for each screen size.
.grid {
display: grid;
grid-template-columns: 200px 1fr 1fr;
}