Frontend · interactive
CSS Grid
Grid lays out rows and columns at the same time. Fixed tracks take their size, fr units share what's left, and auto-fill adds or removes columns as the container changes. Drag the width.
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
container 700px · columns: 166 | 166 | 166 | 166
card 1
card 2
card 3
card 4
card 5
card 6
card 7
4 columns of at least 160px fit in 700px; the leftover is shared so they stretch to 166px. No media queries.
Template
1 2 Fit as many columns as possible, each at least the minimum, then stretch them to fill the row.
repeat(auto-fill, minmax(160px, 1fr))
3 4
In production
Tools and technologies
Grid is supported in every modern browser.
Not tied to one language — use these names when you search docs or design a system.