CSS Grid Generator — Visual Grid Layout Online

Columns:

Rows:

Gap:

CSS

Share X / Twitter Facebook LinkedIn WhatsApp

How to use CSS Grid Generator

Set columns and rows — count and sizes (fr for flexible, px for fixed).
Adjust the gap — Grid's built-in spacing between all tracks.
Preview the structure — items fill cells in source order.
Copy the container CSS — and add span rules per item for cells that should stretch.

What is CSS Grid Generator?

A CSS Grid generator builds two-dimensional layouts visually: choose column and row counts, size them (the fr unit, fixed pixels, or mixes), set the gap, preview the result and copy the display: grid; grid-template-columns: … CSS.

Grid is CSS's system for layouts that align in both dimensions — page scaffolds, dashboards, image galleries, form layouts. Its syntax is compact but abstract (grid-template-columns: 250px 1fr 1fr describes a sidebar-plus-two-columns in five tokens); the generator makes the abstraction visible before you commit it to a stylesheet.

About the CSS Grid Generator

Set your columns and rows, size the tracks, adjust the gap, and copy the generated CSS for the container.

Track-sizing fluency, quickly: 1fr 1fr 1fr is three equal flexible columns; 250px 1fr is the classic fixed-sidebar-fluid-content shell; repeat(3, 1fr) abbreviates equal tracks; and the crown jewel repeat(auto-fit, minmax(250px, 1fr)) creates a responsive card grid — as many ≥250px columns as fit, no media queries — the single most-copied Grid recipe in existence.

The pattern library it accelerates: photo galleries (auto-fit grids), dashboard panels (explicit areas), forms with aligned label/field columns, and the holy-grail page shell (header spanning all columns, sidebar, main, footer) that layout systems chased for two decades and Grid dispatches in six lines. Items place themselves in source order automatically; spanning (an item covering multiple tracks) adds grid-column: span 2 per item.

Frequently Asked Questions

A fraction of the free space: 1fr 2fr splits leftover width one-third/two-thirds after fixed tracks are placed. It's Grid's native flexible unit — prefer it over percentages, which ignore gaps.

The responsive-grid one-liner: fit as many columns of at least 250px as the container allows, stretch them equally, reflow on resize — card layouts without a single media query.

On the item: grid-column: span 2 (or explicit lines: grid-column: 1 / 3). Rows work the same with grid-row. Spanning is per-item CSS on top of the container template.

Grid when cards must align in strict rows AND columns (equal heights, clean lattice); flexbox with wrap when cards can size independently. The auto-fit recipe made Grid the default answer for galleries.

display:grid; grid-template-columns: 250px 1fr; gap: 24px — fixed sidebar, fluid main. Add grid-template-rows and a header spanning both columns (grid-column: 1 / -1) for the full page shell.