How to build a responsive grid without a single media query.
Sponsor this newsletter · reach 9,500+ active developers
You want a grid of cards that shows four columns on desktop, two on tablet, and one on mobile. So you write three media queries. Then the designer changes the minimum card width and you rewrite all three. CSS Grid with auto-fill and minmax() handles this automatically. One line of CSS, zero breakpoints, works at every screen width.
The one-liner
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}Read it as: “create as many columns as will fit, each at least 280px wide, and stretch them equally to fill the row.” On a 1200px screen you get four columns. On a 600px screen you get two. On a 300px screen you get one. No media queries anywhere.
Demo:
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
auto-fill vs auto-fit
These two keywords look similar but behave differently when there are fewer items than columns:
/* auto-fill: keeps empty column tracks */
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
/* 3 items on a wide screen: | card | card | card | empty |
items stay at 280px, they do not stretch */
/* auto-fit: collapses empty tracks */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
/* 3 items on a wide screen: | card | card | card |
items stretch to fill the full row */Use auto-fill when you want cards to stay a consistent size. Use auto-fit when you want items to stretch and fill all available space.
Change the minimum and everything adjusts. The entire responsive behavior lives in one number: the first value in minmax(). Want bigger cards? Change 280px to 360px. The grid recalculates how many columns fit at every width automatically. No media queries to update.
Why it matters
- Truly content-driven layout. The grid does not care how many items you put in it. Add ten more cards and the layout stays correct at every screen size without touching the CSS.
- One value to maintain. The minimum column width is the only thing you need to think about. The rest is math the browser handles.
- All browsers. Baseline 2017. Works in every modern browser without a prefix or flag.
This pattern works for product grids, image galleries, team pages, card layouts, and any repeating content. It is the most useful three lines of CSS you can know and the first thing worth reaching for when you need a responsive grid.
Happy coding!
Marko