Free CSS Grid Generator
This grid builder turns column counts, row counts and gap sizes into working CSS grid code with a live preview. It is designed for page sections, card grids and galleries. Adjust the controls and copy the snippet. Nothing is uploaded.
How it works
Columns use repeat() with equal fractional units; rows size automatically. Gap applies between all tracks. The responsive option adds a media query collapsing to one column on small screens, which covers most marketing grids without further code.
Example
| Settings | CSS |
|---|---|
| 3 cols, 16px gap | grid-template-columns: repeat(3, 1fr) |
Frequently asked questions
Grid or flexbox?
Grid for two-dimensional layouts like card grids; flexbox for single rows or columns.
What does 1fr mean?
One share of leftover space. Three 1fr columns split the row equally.
Why does my grid overflow on mobile?
Fixed column counts squeeze content. The responsive option stacks columns on small screens.
Can I mix column widths?
Yes. Replace repeat() with values like 2fr 1fr for a wide-narrow pair.
Is anything uploaded?
No. Everything renders locally in your browser.
Related tools
- Flexbox Playground , one-dimensional layouts.
- HTML Layout Generator , full page shells.
- CSS Starter Generator , base styles.
- Guide: Small Business Digital Toolkit