CSS Grid Generator
Build CSS Grid layouts visually and export code
CSS Grid Generator lets you set the number of columns and rows (or custom column/row sizes) and a gap, then outputs the exact grid-template-columns, grid-template-rows and gap CSS ready to paste into your stylesheet.
How to use CSS Grid Generator
- 1
Set the number of columns and rows, or enter custom sizes for each.
- 2
Set the gap between grid items.
- 3
Preview the layout update as you adjust it.
- 4
Copy the generated CSS.
Everything you need to know about CSS Grid
What is CSS Grid for?
CSS Grid lays out elements in rows and columns simultaneously — the right tool when a layout needs true two-dimensional structure (a photo gallery, a dashboard, a page layout with a header/sidebar/content area), as opposed to a single row or column of items.
When you actually need this
- Page layouts with a header, sidebar, and main content area.
- Image or card galleries that need consistent rows and columns.
- Dashboard layouts with multiple independent panels.
Grid vs. Flexbox
Grid handles two-dimensional layouts (rows *and* columns together); Flexbox Generator handles one-dimensional layouts (a single row or column that needs to distribute space among its items). Many real layouts use both — Grid for the overall page structure, Flexbox for aligning items within one section of it.
Related Design Tools
Color Palette Generator
Generate beautiful color palettes from a base color
Gradient Generator
Create CSS gradients visually and copy the code
CSS Box Shadow Generator
Generate CSS box-shadow effects with live preview
CSS Button Generator
Design CSS buttons with hover effects and copy code
CSS Animation Generator
Generate CSS @keyframe animations visually
Flexbox Generator
Build CSS Flexbox layouts visually and export code
Frequently Asked Questions
What do the default columns and rows look like in the CSS?
By default each column and row gets an equal fraction of the available space, written as repeat(n, 1fr) — so three equal columns becomes repeat(3, 1fr).
Can I set custom column widths instead of equal ones?
Yes — enter your own track sizes (like 200px 1fr 2fr) instead of using the equal-column default, for layouts where columns shouldn't all be the same width.
Do I need to add anything else to make this work?
Just apply display: grid (included in the generated code) to the container, and the grid-template and gap properties handle the layout — no extra markup is required beyond normal HTML elements inside the container.
Does this tool send anything to a server?
No — the CSS is generated entirely in your browser; nothing you enter is transmitted or stored.
Is this tool free to use?
Yes — completely free, with no signup required.