What units can I use for track sizes?

You can use fr (fractional unit), px (pixels), % (percentage), or auto. The fr unit distributes remaining space proportionally.

What are named grid areas?

Named areas let you assign semantic labels to regions of your grid, which can then be referenced with the grid-area property on child elements.

Does the generated CSS work without a framework?

Yes — it generates standard CSS Grid properties that work in all modern browsers without any additional dependencies.

Can I place items that span multiple columns and rows?

Yes — drag across cells in the preview to create items that span any number of columns and rows simultaneously.

design Free No signup

CSS Grid Generator

Visually build CSS Grid layouts by dragging items across cells and export the CSS.

Loading tool…

About this tool

Define columns and rows with custom track sizes (fr, px, %, auto), set the gap, and click-drag on the live grid preview to span items across multiple cells. The tool generates ready-to-copy grid-template-columns, grid-template-rows, gap, and grid-column/grid-row declarations. Optionally assign named grid areas.

How to use

1 Step 1: Set the number of columns (1–12) and rows (1–8) and the gap size.
2 Step 2: Enter track sizes for each column and row using fr, px, %, or auto units.
3 Step 3: Click and drag on the grid cells to place and size items.
4 Step 4: Copy the generated CSS and paste it into your stylesheet.

About this tool

How to use

Frequently Asked Questions