Grid in one paragraph
display: grid turns a container into rows and columns. grid-template-columns defines the tracks, gap spaces them, and children flow into cells automatically. That is enough for 90% of card grids, galleries and dashboards.
Fixed columns vs auto-fit
repeat(3, 1fr) gives exactly three equal columns at every width — fine for desktop-first sections. repeat(auto-fit, minmax(240px, 1fr)) is the responsive workhorse: it fits as many 240px tracks as the container allows and stretches them to fill. That single line replaces most media queries.
Common layouts
- Card gallery: auto-fit + minmax, gap 16–24px
- Dashboard: 12 columns, children spanning 3/6/12
- Holy grail: grid-template-areas with named regions
- Sidebar: grid-template-columns: 240px 1fr
Grid vs flexbox
Use Grid when you need alignment in two dimensions, or when the layout should be defined by the container rather than the content. Use flexbox when items should size themselves and flow along one axis. They compose well: a grid card can contain a flex row for its footer.
Frequently Asked Questions
Why do my columns overflow?
A grid item with min-width: auto can refuse to shrink. Set min-width: 0 on the item, or use minmax(0, 1fr) instead of 1fr.
How do I span an item across columns?
Use grid-column: span 2 on the child, or define explicit line numbers.
Does grid work with gap on older browsers?
Grid gap has been supported since the first grid implementations; no prefix needed.
Privacy & Your Data
CSSmith runs entirely in your browser. Whatever you type, paste or upload is processed on your own device and never sent to a server — there is no backend to store it.