CSS Grid Layout Generator

Set columns, rows and gaps, place items across cells and copy clean CSS Grid code with HTML. Free, no sign-up, and your files never leave your device.

Free, with no sign-up and no watermark. The file is processed in your browser and never uploaded.

Design two-dimensional layouts with CSS Grid. Add columns and rows with any track size, set gaps and alignment, place named items across cells, and copy CSS plus HTML. Repeated tracks are written as repeat() automatically.

Step by step

  1. Define the tracks: Use the + and − buttons for Columns and Rows, and type sizes such as 1fr, 200px, auto or minmax(150px, 1fr).
  2. Set gaps and alignment: Adjust Column gap, Row gap, justify-items and align-items.
  3. Place items: Under Items, name each one and set Col from/to and Row from/to to span cells. Add item creates another.
  4. Copy: Grab the CSS (container + one rule per item) and the HTML.

Handy for

Page layouts

Header, sidebar, main and footer in a few lines.

Galleries

Equal columns with repeat(4, 1fr).

Dashboards

Widgets spanning different numbers of cells.

Forms

Label and input columns that stay aligned.

Good to know

  • Grid lines are numbered from 1, so a 3-column grid has lines 1–4 — “Col to 4” spans to the end.

  • Invalid track sizes are replaced with 1fr when you leave the box.

  • Item names become class names (lowercase letters, numbers and hyphens).

Questions

What does fr mean?

One fraction of the free space. 1fr 2fr gives the second column twice the width of the first.

Can I make it responsive?

Use repeat(auto-fit, minmax(200px, 1fr)) style values in your CSS, or wrap the generated rules in media queries.

Is anything uploaded?

No. The generator runs entirely in your browser; nothing you type or upload is sent anywhere.

More Web Design tools

  • Border Radius Generator — Shape corners with simple or eight-value elliptical border-radius to make pills, leaves and organic blobs.
  • Neumorphism CSS Generator — Generate soft-UI neumorphic surfaces (flat, concave, convex or pressed) with a built-in contrast check.
  • Font Pairing Tool — Try curated heading and body font pairs, including Hindi-ready ones, and copy self-hosted CSS.
  • Signature Generator — Turn your typed name into a handwritten-style signature, or draw one, and download a transparent PNG or SVG.
  • CSS Box Shadow Generator — Design soft, layered or inset CSS box shadows with live preview and copy-ready CSS or Tailwind classes.
  • Glassmorphism CSS Generator — Create frosted-glass cards with backdrop blur, tint and border, previewed on colourful backgrounds.

All Web Design tools