CSS Grid Generator (All Properties, Live Preview) — Tailwind / React / Vue Export

Advertisement

Cols3
Rows3
Cells9
Gap12px

About this generator

Build CSS Grid container layouts visually. 1-8 columns × 1-8 rows, per-axis unit picker (fr / px / % / auto), independent column-gap and row-gap, and all four alignment properties (justify-items, align-items, justify-content, align-content). Live preview with colored grid cells so you can see structure at a glance.

5 framework exports + URL hash permalink. No login, no watermark, no paywall. Free and MIT-licensed.

How to use

Set columns & rows

Define how many columns and rows your grid has. Each track gets its own unit setting.

Choose a track unit

fr distributes free space proportionally. px and % give fixed sizes. auto sizes to content.

Adjust gap

Set column-gap and row-gap independently to control spacing between tracks on each axis.

Align items

justify-items and align-items control how each cell's content sits within its grid area.

Align the whole grid

justify-content and align-content move the entire grid track bundle within its container.

Copy the CSS

Hit "Copy CSS" to grab the full property block and paste it straight into your stylesheet.

</>

CSS Grid syntax

Property	Description
`grid-template-columns`	Defines the width of each column track. Accepts fr, px, %, auto, or repeat().
`grid-template-rows`	Defines the height of each row track. Same value types as columns.
`gap`	Shorthand for row-gap and column-gap. Sets space between tracks.
`justify-items`	Aligns grid items horizontally within their cell: stretch \| start \| center \| end.
`align-items`	Aligns grid items vertically within their cell: stretch \| start \| center \| end.
`justify-content`	Aligns the whole column axis within the container when tracks don't fill it.
`align-content`	Aligns the whole row axis within the container when tracks don't fill it.

</>

CSS Grid snippets

Basic

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;

Fixed

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

Layout

display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
column-gap: 16px;
row-gap: 8px;
justify-items: stretch;
align-items: stretch;

✓

Browser support

CSS Grid has excellent modern browser support. IE 11 has an older, partial implementation with a different syntax — avoid relying on it without a polyfill.

Chrome v57+

Firefox v52+

Safari v10+

Edge v16+

IE —