CSS Grid Generator

Visually build CSS Grid layouts — configure columns, rows, gap and alignment, then copy the generated CSS or HTML.

css grid layout columns rows gap flexbox generator template alignment
Free Client-Side Private
Columns
Count 3
Rows
Count 3
Gap
16px
16px
Alignment
Grid Items
Item count 9
Live Preview
Output
🔒 This tool runs entirely in your browser — your files are never uploaded to any server.

What is CSS Grid?

CSS Grid is a two-dimensional layout system that lets you define rows and columns simultaneously. Unlike Flexbox, which works in a single axis, Grid gives you precise control over both dimensions, making it ideal for page layouts, card grids, and dashboards.

How to Use

  1. Set the number of Columns and Rows using the +/− steppers.
  2. Click any track input (C1, C2… or R1, R2…) to edit its size — use values like 1fr, 200px, auto, or minmax(100px, 1fr).
  3. Adjust Column gap and Row gap sliders to control spacing.
  4. Set justify-items, align-items, justify-content, and align-content to control item and track alignment.
  5. Use the Item count stepper to preview different numbers of children.
  6. Copy the CSS tab output or switch to HTML for a ready-to-use markup snippet.

Track Size Values

Value Description
1fr One fractional unit — shares remaining space proportionally
200px Fixed pixel width
auto Sizes to the content
minmax(100px, 1fr) At least 100px, up to 1 fraction of available space
repeat(3, 1fr) Shorthand for three equal columns

FAQ

What is the difference between justify-items and justify-content?

justify-items controls how each item is aligned within its own grid cell along the inline (row) axis. justify-content controls how the entire grid track is distributed within the container when the grid is smaller than the container.

What does fr mean?

fr is a fractional unit. 1fr means "one part of the available space". With grid-template-columns: 1fr 2fr 1fr, the three columns take 25%, 50%, and 25% of the available width respectively.

Can I specify different sizes per column or row?

Yes — click or edit any individual track input chip (C1, C2, R1, R2, etc.) and type any valid CSS track sizing value. Each column and row can have a different size.

What is the gap shorthand?

When column-gap and row-gap are equal, the generator outputs the gap shorthand property. When they differ, it outputs column-gap and row-gap separately.

Do I need to use grid-template-rows?

Not always. If you only define grid-template-columns, the browser will auto-generate rows using the implicit grid. Defining grid-template-rows gives you explicit control over row heights.

Report an issue