CSS Grid Generator

CSS Grid Generator

Visual CSS Grid layout builder. Define rows, columns, gaps with live preview. Generate grid-template code. Free online CSS Grid playground and code generator

CSS Grid is the most powerful layout system in web standards — and the hardest to fully internalize. The interesting part is not `grid-template-columns: repeat(3, 1fr)`; it is `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` — the one-line responsive grid that fills the container with as many 280px+ cards as fit, no media queries needed. This builder authors Grid layouts visually with named areas, fr units, minmax, auto-fill/auto-fit, and explains the implicit grid for items placed outside the explicit track count.

The "responsive without media queries" pattern

Input

A photo grid: cards at least 280px wide, max as many per row as fit

Output

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

Behavior:
  Container ≥ 1124px → 4 columns (each ~ 281px, stretched by 1fr).
  Container 844-1123 → 3 columns.
  Container 564-843  → 2 columns.
  Container ≤ 563    → 1 column.

Zero media queries. Resizes smoothly with the viewport.

The `minmax(280px, 1fr)` says "each track is at least 280px, but stretches up to 1fr of remaining space". `auto-fit` means "fit as many tracks as possible without overflow". Replace `auto-fit` with `auto-fill` if you want empty tracks left when there are fewer items than fit slots.

Grid concepts ranked by power

  • Tracks (rows/columns) — defined by `grid-template-columns` and `grid-template-rows`. Use sizes (px, %, em), fr (fraction of remaining space), auto (content-sized), or minmax/min-content/max-content.
  • fr unit — distributes remaining space proportionally. `1fr 2fr` = first track 1/3, second 2/3 of remaining width after fixed tracks are placed.
  • Named areas — `grid-template-areas: "header header" "sidebar main" "footer footer"`. Pair with `grid-area: header` on the child. Most readable layout syntax in CSS.
  • Line numbers — items span between numbered grid lines. `grid-column: 1 / 4` spans columns 1-3 (line 1 to line 4). Negative numbers count from the end: `grid-column: 1 / -1` = full width.
  • `span N` — `grid-column: span 2` takes 2 columns starting wherever the auto-placer puts the item.
  • Implicit grid — items placed beyond the defined tracks create new ones. Size them with `grid-auto-rows` / `grid-auto-columns`. The default is `auto`, which means content-height — usually fine.
  • `grid-auto-flow` — `row` (default), `column`, `dense`. Dense lets later items backfill earlier gaps left by big items.

Working example: a typical app layout

Input

Header (top), sidebar (left), main content (right of sidebar), footer (bottom)

Output

.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  height: 100vh;
  gap: 0;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; overflow-y: auto; }
.footer  { grid-area: footer; }

Compare to the same layout in flexbox: requires nested wrappers (header outside the main flex, then a side-by-side flex of sidebar + main, then footer outside). Grid expresses the entire structure in one rule.

Subgrid: lining up rows across nested grids

Subgrid (Firefox 71 in 2019, Safari 16 in 2022, Chromium 117 in 2023) lets a nested grid inherit row or column tracks from its parent. Without subgrid, two card components with different content lengths cannot align their titles or actions across cards — each card has its own grid. With subgrid, cards opt into the parent's row tracks and titles/actions align across the whole gallery.

.parent { display: grid; grid-template-columns: repeat(3, 1fr); }
.card   { display: grid; grid-template-rows: subgrid; grid-row: span 3; }

When to reach for this tool

  • You are designing a dashboard, gallery, or app shell — anything where 2D alignment matters.
  • You want a "media-query-free" responsive layout that adapts based on container width, not viewport breakpoints.
  • You inherited a deep flexbox nesting that "almost works" and want to flatten it into a single Grid declaration.
  • You are picking which CSS layout primitive fits a component — try both Grid and flex in a sandbox before committing.

What this tool will not do

  • It will not generate fallbacks for ancient browsers (IE 11 had an early-spec Grid that diverges in surprising ways). Modern Grid: assume 95%+ support since 2020. If you must support IE 11, write Grid as enhancement on top of flexbox.
  • It will not auto-detect content overflow. Grid items can overflow their tracks; you decide whether to scroll (`overflow:auto`), clip, or shrink. Plan content density at design time.
  • It will not pick fonts, colors, or spacing tokens for you. Grid is structure; visual design lives separately.

Frequently asked questions

What is the difference between auto-fit and auto-fill?

Both place as many tracks as fit. The difference is what happens when there are fewer items than tracks: `auto-fill` keeps empty tracks; `auto-fit` collapses empty tracks and stretches the remaining ones to fill. For galleries with variable item counts, auto-fit usually looks better; for fixed-grid layouts where empty slots matter (calendar), auto-fill.

When should I use fr vs % for column widths?

fr distributes remaining space after fixed tracks; % is relative to total container width including any fixed tracks. `200px 1fr 200px` gives two fixed sidebars and a fluid middle. `200px 50% 200px` may overflow if 50% of the container plus 400px exceeds the container.

Why is my Grid item overflowing its track?

Default `min-width: auto` on grid items means they will not shrink below their content min-width (long unbreakable strings, images at intrinsic size). Set `min-width: 0` on the item to allow shrinking, or `overflow: hidden` to clip.

Can I animate Grid tracks?

In modern browsers (Chrome 115+, Safari 17.4+, Firefox 121+) `grid-template-columns` and `grid-template-rows` interpolate. Animate from `grid-template-rows: 0fr` to `1fr` for accordion-style expand/collapse. Before this support, animating grid was impossible — only height/transform tricks worked.

How do I make grid items span multiple rows?

`grid-row: span 2` (relative to placement) or `grid-row: 1 / 3` (absolute lines). Span syntax is more resilient when adding items above. For "make this card double-height", span is what you want.

Is Grid faster or slower than flexbox?

Roughly equivalent for typical layouts. Both are GPU-accelerated for backgrounds, both run on the main thread for layout. Grid avoids the deep DOM nesting that flex sometimes requires, which means slightly faster layout pass — measurable only in extreme cases (1000s of items). For everyday components, pick by ergonomics not performance.

Related tools

CSS Flexbox Generator

Visual CSS Flexbox layout builder. Configure flex container and items with live preview. Generate flexbox code for responsive layouts. Free online flexbox playground

Border Radius Generator

Visual border-radius generator for CSS. Create rounded corners, pills, organic shapes. Generate CSS border-radius code with live preview

CSS Box Shadow Generator

Create CSS box shadows visually with multiple layers. Adjust blur, spread, offset, color. Free online box-shadow CSS code generator

CSS Gradient Generator

Create beautiful linear, radial, conic CSS gradients visually. Copy CSS code instantly. Free online gradient maker with multiple color stops

Last updated · E-Utils editorial team