CSS Grid Generator — Visual Grid Layout Builder
Visually build CSS Grid layouts: rows, columns, gaps, areas. Live preview, copy CSS code. Free, browser-only.
About CSS Grid Generator
A CSS Grid generator lets you visually build a CSS Grid layout — rows, columns, gaps, named areas — with a live preview and one-click copy of the resulting CSS, eliminating the trial-and-error of writing grid-template-* properties by hand. The ZTools CSS Grid Generator runs entirely in the browser, supports drag-to-resize columns + rows, named grid areas, gap configuration, and outputs both `display: grid` parent CSS and child `grid-area` placement, ready to paste into any project.
Use cases
- Page-level layout. Header / sidebar / main / footer holy-grail layout. Generator outputs `grid-template-areas: "header header" "sidebar main" "footer footer"` with named placement.
- Card grids. Responsive card grids using `repeat(auto-fit, minmax(250px, 1fr))`. Generator surfaces the auto-fit / auto-fill distinction visually.
- Form layouts. 2-column form with labels left, inputs right. Grid handles alignment cleanly without absolute positioning hacks.
- Dashboard layouts. Multi-widget dashboard with nested grids. Generator outputs the parent grid; nest child grids in the generated areas.
How it works
- Set grid dimensions. Number of columns (1-12) and rows (1-12). Default unit is fr (fractional) — equal sizing across columns.
- Resize tracks. Drag column / row separators to set sizes (px, fr, %, auto). Mix-and-match supported (1fr / 200px / auto).
- Set gaps. Row gap and column gap in px / rem / em. Equal in both directions or different per axis.
- (Optional) Name areas. Click cells to assign to a named area (e.g. "header"). Multiple cells with same name merge.
- Copy CSS. Output: parent `display: grid` + `grid-template-columns/rows/areas/gap`; child `grid-area: header` etc. Copy + paste into your stylesheet.
Examples
Input: 3-column equal grid with 16px gap
Output: display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
Input: Holy-grail layout: header + sidebar + main + footer
Output: grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 200px 1fr; grid-template-rows: 60px 1fr 40px;
Input: Auto-fit card grid
Output: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Frequently asked questions
Grid vs Flexbox: which to use?
Grid: 2D layouts (rows + columns simultaneously). Flexbox: 1D (single axis). Page layouts → grid; navigation bars → flex; cards inside a grid cell → flex.
What's the difference between fr and %?
fr = fractional unit; distributes available space after fixed-size tracks. % = percentage of container. fr is more flexible for responsive layouts.
When should I use named areas?
When the layout has semantic regions (header, sidebar, main, footer). Names beat numeric line references for readability and refactoring.
Auto-fit vs auto-fill?
auto-fit: empty tracks collapse to 0 — items expand. auto-fill: empty tracks remain — items don't expand. auto-fit is usually what you want for responsive cards.
Is the CSS uploaded?
No — generator runs in browser; output stays local until you copy.
Will this work in older browsers?
CSS Grid: all modern browsers (98%+ support since 2017). For IE11, fallback to flexbox or table-cell layouts.
Pro tips
- Start with named areas — semantic markup beats numeric grid lines for maintainability.
- Use fr for flexible sizing; px for fixed sidebars / headers.
- Inspect grid in DevTools — Chrome / Firefox both have visual grid overlays for debugging.
- Combine grid (parent) + flex (child cells) — both excel at different layout problems.
- For responsive: change grid-template-columns at breakpoints; the structure stays the same.
Reviewed by Ahsan Mahmood · Last updated 2026-05-05 · Part of ZTools.
For the full,
formatted version of this page, please enable JavaScript and reload
https://ztools.zaions.com/css-grid-generator.