Lay out cards, galleries and whole pages with CSS grid. Start from a preset such as responsive cards or a header-sidebar-footer page, adjust columns, rows and gaps, and copy the finished CSS and HTML.
loading toolHow to make a CSS grid
- Pick a preset or change the settings.
- Watch the live preview.
- Copy the CSS into your stylesheet.
Questions
What does 1fr mean?
One share of the free space. “1fr 2fr” makes the second column twice as wide as the first.
How do I make a grid responsive without media queries?
Use repeat(auto-fit, minmax(160px, 1fr)): the browser fits as many columns as there is room for.
Is my data private?
Yes. Everything happens inside your own browser: nothing you type or choose is uploaded to us or anyone else.
Is it free?
Completely free, with no sign-up, no watermark and no limit on how many times you use it. Light ads keep the site running.
