How do you use this tool?
- Pick a preset or set columns and rows via the track controls with a per-track unit picker (fr, px, %, auto, min-content, minmax).
- Click template-area cells and type region names, e.g. header / sidebar / main / footer.
- Add items, assign grid-area, or set numeric column / row ranges. Toggle subgrid per item when card headers or footers need a shared baseline.
- Enable container queries optionally — the grid then responds to its own width, not the viewport.
- Copy the output: CSS, Tailwind v4 (arbitrary values), SCSS, or HTML.
What does the CSS Grid Generator do?
The generator builds CSS Grid layouts visually. Columns and rows are defined via track controls — each track has a unit picker (fr, px, %, auto, min-content, max-content, minmax) and a value editor. Template areas are built by clicking cells in a matrix and typing region names. Per-item inspectors allow grid-area, numeric column / row ranges, subgrid toggles, and order overrides.
Above the configuration, a side-by-side preview shows the layout in three viewports simultaneously — mobile (375 px), tablet (768 px), and desktop (1280 px). Edits propagate to all three live. That’s the key difference from generators with a breakpoint switcher: you see immediately how a layout change affects all three devices, instead of clicking through one at a time.
Note on the preview: The three viewports render through scoped CSS rules (no <iframe>) so the configuration stays pure-client and SSR-friendly. That is illustrative, not pixel-perfect: vw, cqi, and cqw units resolve against the tool’s actual page width, not against the 375/768/1280 px stage. For the primitives fr, px, %, auto, and minmax() the rendering matches exactly; for @container breakpoints you see the switching logic correctly, but the container-query resolution inside the staged box is an approximation.
The output ships in four formats: plain CSS with display: grid plus grid-template-* properties, Tailwind v4 with arbitrary-value classes for tracks and grid-template-areas, SCSS with reusable $grid-* variables, and matching HTML markup for every format. All tabs are paste-ready.
How does subgrid work?
subgrid solves a problem CSS Grid lacked for years: cards arranged in a row should align their headers and footers on shared baselines, even when content lengths vary. Without subgrid the only options were JavaScript height-syncing or abandoning the card concept. With subgrid each card sets grid-template-rows: subgrid and inherits its parent grid’s row definition — headers and footers land at the same height automatically.
Browser support has been comprehensive since late 2023: Chrome 117, Safari 16, and Firefox 71 support subgrid on both axes. Most online generators ignore the feature entirely. This generator emits subgrid as a first-class per-item toggle plus a status pill whenever subgrid is active, so you can document browser requirements at a glance.
When should I use container queries?
Container queries (@container rule + container-type: inline-size) are the second major CSS layout innovation of the decade. They respond to a specific parent container’s size instead of the viewport. The use case: a card component that renders as a compact stack in the sidebar and a horizontal three-column block in the main area — without polluting the card component with sidebar-specific classes.
The generator emits an opt-in .grid-container { container-type: inline-size; } wrapper plus up to three @container (min-width: Npx) blocks with their own track definitions per breakpoint. The HTML markup adapts automatically. Container queries have been supported in all major browsers since 2023.
How do I write CSS Grid in Tailwind v4?
Tailwind switched to CSS-first configuration in v4 and made arbitrary values the default. Instead of the rigid grid-cols-12 scale, the generator emits the precise track expression:
| Concept | Tailwind v4 | Plain CSS |
|---|---|---|
| Equal fr tracks | grid-cols-2 | grid-template-columns: 1fr 1fr |
| Mixed units | grid-cols-[200px_1fr_auto] | grid-template-columns: 200px 1fr auto |
| Responsive cards | grid-cols-[repeat(auto-fill,minmax(280px,1fr))] | grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) |
| Template areas | [grid-template-areas:'header_header''sidebar_main'] | grid-template-areas: "header header" "sidebar main" |
| Subgrid | grid-cols-subgrid | grid-template-columns: subgrid |
| Item span | col-span-3 | grid-column: span 3 |
| Named area | [grid-area:header] | grid-area: header |
Underscores between cells in arbitrary values are a v4 quirk — Tailwind can’t parse spaces in class names, so v4 uses _ as a separator and converts to spaces at build time. The generator emits this correctly.
Which layout presets are included?
Five curated real-world layouts:
Holy-Grail Layout. Header on top, sidebar / main / aside in the middle, footer at the bottom. Classic grid-template-areas pattern. Item placement via names rather than line numbers — very readable in the stylesheet.
Card Grid. Responsive cards via repeat(auto-fill, minmax(280px, 1fr)). Reflows automatically when space runs short, without media queries. Card content should set min-width: 0, otherwise a long word can blow out the minmax floor.
Magazine Layout. 12-column grid with deliberate item spans for hero, lead, sidebar, feature, and aside. Flexible enough for editorial variety, structured enough for consistent reuse.
Dashboard. Header on top, sidebar on the left, content on the right, status at the bottom. Solid admin-shell skeleton without position: absolute.
Subgrid Cards. Cards with aligned header and footer rows via subgrid. Demonstrates the strongest argument for Grid Level 2 — clean vertical lines without JavaScript helpers.
What does the order notice mean?
WCAG 2.2 Success Criterion 1.3.2 — “Meaningful Sequence” requires that reading and tab order match the visual flow. If you arrange items via order or grid-area so a DOM-later item appears visually before a DOM-earlier one, the following happens:
- Sighted mouse users read visual order — the layout feels right.
- Keyboard users tab through DOM order — they land in a different sequence.
- Screen readers also read DOM order — and announce the layout differently.
The generator flags such drifts inline. The fixes: either adjust DOM order (declare items in the desired visual sequence in the HTML) or restructure the layout so no order / grid-area shift is needed.
What are the most common CSS Grid pitfalls?
min-content versus 0. Items default to min-width: auto, which is the intrinsic minimum content size. With long words or wide images, a single item can blow out the layout. Fix: min-width: 0 on the item — then it respects the minmax() floor correctly.
Gappy grid-template-areas. Every row needs the same number of cells. Rectangles only, no L-shapes — a region cannot span two non-contiguous areas. Dot cells (.) mark empty slots explicitly.
fr with absolute minimum widths. 1fr only distributes remaining space after fixed tracks are subtracted. If content in an fr column exceeds the remaining space, the column expands anyway — the container can grow wider. Fix: minmax(0, 1fr) instead of 1fr.
Subgrid needs a parent grid. grid-template-columns: subgrid without an explicitly defined parent grid has no effect — and the browser reports no error. Only when an ancestor sets display: grid plus explicit tracks does the subgrid item inherit them.
How does this generator differ?
Comparable online generators mostly ship plain CSS, a single breakpoint preview, and no hint about tab order or subgrid. This generator sets five anchors:
- Subgrid first-class — most generators ignore the feature entirely. Here it’s a per-item toggle.
- Container queries opt-in — none of the surveyed competitors emit
@containerblocks. Here the grid responds to viewport OR container width on demand. - Three viewports in parallel — other tools show one breakpoint at a time; here you see mobile, tablet, and desktop simultaneously.
- Tailwind v4 arbitrary values — other tools still write
grid-cols-12. We emitgrid-cols-[200px_1fr_auto]with Tailwind v4 syntax. - WCAG order notice — no other tool warns about tab-order drift, even though WCAG 2.2 requires it.
What do users ask most often?
What does a CSS Grid generator do?
The generator builds CSS Grid layouts visually. You set columns and rows via UI controls, paint template-areas onto a cell matrix, assign items via grid-area, and see the result live in three viewports simultaneously — mobile, tablet, and desktop. The output ships as plain CSS, Tailwind v4, SCSS, or HTML.
How does CSS subgrid work?
Subgrid is set via grid-template-columns: subgrid or grid-template-rows: subgrid on a grid item. The item then inherits its parent grid’s tracks instead of defining its own. The classic use case: card headers and footers align on a shared baseline without JavaScript height-syncing. Supported since Chrome 117, Safari 16, and Firefox 71.
What is the difference between container queries and media queries?
Media queries react to viewport size, container queries react to the size of a specific parent container. An @container (min-width: 480px) block triggers when the container, not the browser window, is at least 480px wide. This makes components truly reusable — a card component adapts whether it sits in the sidebar or the main area. Requires container-type: inline-size on the parent.
When should I use CSS Grid instead of Flexbox?
Grid is two-dimensional and plans rows AND columns simultaneously — ideal for page layouts, magazine structures, card grids, and dashboard shells. Flexbox is one-dimensional and shoves items along a single axis — perfect for navigation bars, toolbars, or vertical lists. In practice you combine them: Grid for the outer skeleton, Flexbox for inner components.
What are grid-template-areas?
grid-template-areas is a visual notation for CSS Grid layouts: you describe the arrangement via named region names in quoted strings, e.g. "header header" "sidebar main" "footer footer". Items with grid-area: header land there automatically. Upside: the layout is instantly readable in the stylesheet, no counting of column lines.
How do I write CSS Grid as Tailwind v4 classes?
Tailwind v4 allows arbitrary values on every grid property. grid-cols-[200px_1fr_auto] replaces the rigid grid-cols-12 scale. Template areas go via [grid-template-areas:'header_header''sidebar_main''footer_footer'] — underscores between cells, single quotes per row. Subgrid gets grid-cols-subgrid and grid-rows-subgrid as native utilities.
What does the order notice show?
WCAG 2.2 Success Criterion 1.3.2 requires that reading and tab order match visual order. If you place items via order or grid-area so they appear visually before a sibling declared earlier in the DOM, keyboard and screen-reader users still encounter them later — the layout feels backwards. The generator flags such drifts inline.
Does the tool save my layouts?
No. All settings stay in the browser tab — no server, no account, no cookies. Reloading resets the editor to defaults. To save a layout, copy the output code into your own stylesheet.
Which related CSS tools are useful?
More tools for visual CSS authoring:
- Flexbox Playground — one-dimensional flex layouts with axis overlay and per-item overrides.
- CSS Animation Builder — keyframe animations with reduced-motion fallback and Tailwind v4 export.
- Box Shadow Generator — multi-layered shadows with Material 3 elevation presets.
- CSS Gradient Generator — linear, radial, and conic gradients with OKLCH.
Last updated: