Responsive CSS Grid
auto-fill with minmax() creates a naturally responsive grid that reflows without any media queries.
The browser calculates how many columns fit in the available space.
HTML
Intermediate
5 min read
CSS Grid for Responsive Design
Example
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
/* With explicit breakpoints */
@media (min-width: 768px) {
.grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) {
.grid-2 { grid-template-columns: 2fr 1fr; }
} Pro Tip
repeat(auto-fill, minmax(min, 1fr)) is a one-liner that handles most responsive card grids without media queries.