CSS Grid Generator
Build a CSS grid visually. Set your columns, rows, and gaps, choose an item to adjust its span, then copy the generated CSS and HTML into your project.
Grid settings
Exports a one-column layout below 600px. Minimum rows reserve space; more rows appear automatically as items fill the grid.
Item 1
Select a numbered item in the preview to edit it.
Live grid preview
Numbers identify items. Narrow preview widths may scroll horizontally so track sizes stay accurate.
Copy both snippets. Put the HTML in your page and the CSS in your stylesheet. Only layout styles are exported; add your own colors, borders, and content.
How to use this CSS grid creator
Start with a preset or build your layout from scratch. This visual grid builder generates CSS for equal-width columns, spacing, item spans, and an optional mobile breakpoint. Select a card to control how many columns or rows it occupies.
What does this grid CSS generator export?
The CSS uses display: grid, grid-template-columns, grid-template-rows, gap, and item span rules. The HTML tab provides a matching container and numbered items. Additional rows are created automatically when the content needs them.
How do I make a responsive CSS grid?
Enable “Stack items on small screens” to export a one-column layout below 600px. The mobile rules clear item spans so wide cards fit the screen. The preview uses its available width to simulate this breakpoint; exported CSS uses the browser viewport width.
What is an fr unit?
An fr is a fraction of the space available in the grid. This tool uses equal-width minmax(0, 1fr) tracks so columns share the space and can shrink without forcing the container wider.
Can I place items anywhere in the grid?
This CSS grid generator supports automatic placement and adjustable spans. Items follow their HTML order. It does not export named areas, fixed starting lines, or overlapping items.