📐

CSS Grid Generator

CSS Tools

Build CSS Grid layouts visually. Free, private — all processing in your browser.

Columns: 3

Rows: 3

Gap: 16px

Items: 9

Column Sizes

Row Sizes

justify-items

align-items

Generated CSS

display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 16px;
justify-items: stretch;
align-items: stretch;

How to use

1. Enter or paste your data in the input area above
2. Adjust settings or options as needed
3. Click the action button or see real-time results
4. Copy the result with the copy button

All processing happens in your browser. Nothing is sent to any server.

About this tool

Build CSS Grid layouts visually with controls for columns, rows, gaps, and alignment. Set the number of columns (1-8) and rows (1-8), choose individual sizes for each track from 12 options (auto, 1fr, 2fr, 3fr, fixed pixel values, minmax, min-content, max-content), adjust gap spacing, and set justify-items and align-items alignment. The live preview shows colored grid items that respond to your settings in real-time. Adjust the number of items to see how auto-placement works. The tool generates clean CSS code with grid-template-columns, grid-template-rows, gap, and alignment properties. Essential for building page layouts, dashboard grids, card layouts, and any two-dimensional arrangement.