repeat(), minmax() and auto-fit
Functions such as repeat() reduce repetitive track definitions. minmax() defines lower and upper track limits. Combined with auto-fit or auto-fill, these features enable responsive grids that can adapt without explicit breakpoint definitions.
A common pattern is repeat(auto-fit, minmax(250px, 1fr)).
Responsive Grid Track Sizing
Responsive Grid Without Breakpoints
.products {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(250px, 1fr)
);
gap: 1.5rem;
}💡 The browser automatically determines how many columns can fit while keeping each item within the defined size range.
Key Takeaways
minmax()expresses responsive track constraints.auto-fitcan create highly responsive grids without media queries.
Knowledge Check
Which function is commonly paired with `auto-fit` to create responsive grid columns?