CSS Generators
CSS Gradient GeneratorCSS Box-Shadow GeneratorCSS Grid GeneratorCSS Clip-Path Generator

CSS Grid Generator

Build a grid layout visually — columns, rows, gaps, alignment, and named areas.

Runs in your browserNo sign-up required
1
2
3
4
5
6
Export

See Your Grid, Not Just the Code

CSS Grid is powerful but easy to get subtly wrong when writing track sizes and gaps by hand — a numbered live preview shows exactly how many cells your current settings produce and where they land, updating instantly as you adjust columns, rows, gaps, and alignment, with an optional named-areas mode for header/sidebar/main style layouts.

How to Use This Tool

  1. 1Set your columns and rowsAdd or remove tracks, and type any valid size (fr, px, %, auto, minmax()) per track.
  2. 2Adjust row and column gapIndependently, since they don't always need to match.
  3. 3Set alignmentJustify-items and align-items control how content sits inside each cell.
  4. 4Optionally name your areasFor a header/sidebar/main/footer-style layout, type a grid-template-areas string directly and see it visualized.

Grid Concepts Worth Knowing

  1. 1"fr" units divide remaining space proportionallyA column set to 1fr and another to 2fr means the second column gets twice the space of the first, after any fixed-size columns are accounted for — it's usually the right choice for flexible, responsive layouts.
  2. 2grid-template-areas names your layout instead of counting cellsInstead of tracking which numbered cell something belongs in, you assign each cell a name (like "header" or "sidebar") and reference that name — clearer to read and easier to rearrange later.
  3. 3Row gap and column gap don't have to matchA layout can reasonably want tighter spacing between columns than between rows (or vice versa) — treating them as independent values, as this tool does, avoids forcing an unnatural compromise.

Frequently Asked Questions

What values can I type for a column or row track?

Any valid CSS grid track size — a fixed size like 200px, a flexible fraction like 1fr, a percentage, auto, or a function like minmax(150px, 1fr) for a column that has a minimum but can still grow.

What does grid-template-areas actually do?

It lets you assign a name to a rectangular region of the grid and reference that name when placing elements, instead of using row/column line numbers — for example, a "header" area spanning the full width, with "sidebar" and "main" areas below it.

What's the difference between justify-items and align-items?

justify-items controls how content is positioned horizontally within each grid cell; align-items controls vertical positioning. Both default to "stretch," which fills the entire cell.

Does this tool support responsive breakpoints?

Not directly — it generates the grid definition for a single layout. For a responsive design, you'd typically wrap the generated CSS in a media query, or generate a separate simpler layout for smaller screens.

Is my layout design saved anywhere?

No — everything is generated locally in your browser. Nothing you build here is saved or transmitted.

Is this grid generator free to use?

Yes, completely free, with no sign-up and no limit on how many layouts you build.