CSS Grid Generator

About CSS grid generator

Define columns and rows as text, tune the gap, and see a grid of numbered cells update as you type. The tool prints display: grid with the two template properties and the gap, ready to paste. It helps when you know the layout you want but not the exact track syntax.

How to use it

1. Under Columns edit each Col field, or use Add column to append another 1fr track (up to 8).
2. Under Rows edit each Row field, or use Add row for another auto track (up to 6).
3. Click one of the track shortcut buttons, such as min-content or minmax(100px, 1fr), to apply it to the last row.
4. Move the Gap slider from 0 to 40 px, or press Unequal gaps to set Column gap and Row gap separately.
5. Copy the result from Generated CSS.

A fixed sidebar and two flexible columns

Columns 200px, 1fr, 1fr. Rows auto, 1fr. Gap 16

display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: auto 1fr;
gap: 16px;

When to use it

• Sketching a dashboard with a narrow sidebar and equal content columns.
• Checking how fr units share leftover space compared with fixed pixel tracks.
• Making a photo gallery template with a set number of columns.
• Comparing gap and separate row-gap and column-gap outputs.

Questions about CSS grid generator

Can I type any track value?

Yes. Each field is plain text, so 1fr, 200px, auto, min-content and minmax(100px, 1fr) all work. The tool does not validate the text, so a typo goes into the output exactly as entered.

Why do the shortcut buttons only change one row?

They apply to the last row in the list, which is a quick way to test intrinsic sizes. Column tracks must be typed directly.

How many cells appear in the preview?

One per column-row intersection, capped at twelve so the preview stays readable even for large grids.

What does Unequal gaps change in the CSS?

It swaps the single gap line for a row-gap line and a column-gap line so the two directions can differ.

Related tools

• Flexbox generatorVisual playground for all flexbox properties — live preview with colored items and CSS output
• CSS pattern generatorGenerate dots, grid, diagonal, checkerboard, and cross CSS background patterns
• Spacing scale generatorBuild a design-token spacing scale from a base unit — exports CSS custom properties
• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview
• CSS shadow generatorCraft box-shadow and text-shadow CSS with multi-layer support, presets, and live preview
• Glassmorphism generatorCreate frosted-glass effects with backdrop blur, transparency, and border controls — live preview included