CSS Grid Generator
Build CSS Grid layouts visually. Define columns, rows, and gaps. Place items with grid-column and grid-row. Copy CSS code instantly. Free online tool.
Click an item to edit. Hover to remove.
display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 12px;
grid_viewGrid Container
styleLayout Presets
About this tool
The CSS Grid Generator lets you build grid layouts visually. Add columns and rows with the + button, choose units (fr, px, %, auto, minmax) from dropdowns. For power users, toggle Advanced mode to type raw CSS values like repeat(3, 1fr).
Place items precisely with grid-column and grid-row controls, or let them auto-place. Use preset layouts for common patterns. Switch between Split View and Full CSS to copy exactly what you need.
Frequently Asked Questions
What CSS Grid properties can I set?
Container: grid-template-columns, grid-template-rows, gap (or separate column-gap and row-gap). Items: grid-column, grid-row, justify-self, and align-self.
What units are supported for columns and rows?
You can use fr (fractional), px, %, auto, and minmax(). For example: '1fr 2fr', '200px 1fr', or 'repeat(3, 1fr)'.
Are there preset layouts?
Yes. Six presets: 2 Columns, 3 Columns, Sidebar, Holy Grail, Dashboard, and Gallery. Click any to apply instantly, then customize.