Responsive Grid
auto-fill or auto-fit with minmax() creates a grid that automatically adjusts the number of columns.
CSS
Intermediate
4 min read
Responsive CSS Grid
Example
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: 1.5rem;
}
/* 1 col mobile, 2 tablet, 3+ desktop — no media queries needed */ Pro Tip
auto-fit collapses empty tracks; auto-fill keeps them. Prefer auto-fit for card grids.