CSS Grid Generator
Build CSS Grid layouts visually and copy the grid-template CSS
Grid settings
Examples
Equal three-column layout
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;Three flexible columns that share the available width equally, separated by a 16px gap.
Responsive card gallery
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 24px;Cards wrap automatically, each at least 200px wide and growing to fill the row.
Details
CSS Grid is a two-dimensional layout system for the web. This generator lets you configure the number of columns and rows, the track sizing (flexible fr units or fixed pixels) and the gaps between tracks, then gives you the exact grid-template CSS to drop into your stylesheet. Everything renders live in your browser.
Examples
Default three-column card grid
Presets: 3 columns
Columns: 3 · Rows: 2 · Gap: 16/16 · useFr: on.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
}When the row and column gap are equal, buildCss collapses the rule to the single `gap` shorthand. repeat(n, 1fr) gives equal-width tracks that share whatever horizontal space the container has.
Sidebar + content layout
Presets: Sidebar + content
Columns: 2 · Rows: 1 · Gap: 0/24 · useFr: off.grid-container {
display: grid;
grid-template-columns: repeat(2, minmax(100px, 1fr));
grid-template-rows: repeat(1, minmax(100px, 1fr));
row-gap: 0px;
column-gap: 24px;
}With useFr off, each track is minmax(100px, 1fr) — flexible, but never below 100px. The unequal row/column gap forces the long-form output rather than `gap:` because the two values differ.
Photo gallery — 4×3 grid with tight gap
Presets: Photo gallery
Columns: 4 · Rows: 3 · Gap: 8/8 · useFr: on.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 8px;
}Same shape as the default but with 4 columns, 3 rows and an 8px gap — a solid photography-grid starting point. Tracks are equal-width by default; add minmax(…) on a per-column basis to pin tile widths.
About this tool
The CSS Grid Generator turns three sliders and a switch into a working layout: choose 1–12 columns and 1–12 rows, set column and row gaps from 0 to 64px, and a live preview redraws numbered cells in real time. Beneath it, a ready `.grid-container` rule appears with `display: grid`, matching `grid-template-columns` and `grid-template-rows`, and the gap declarations.
Track sizing is where layouts earn their flexibility. With flexible tracks on, the generator emits `repeat(N, 1fr)` — every column takes an equal fraction of the free space. Switch it off and each track becomes `minmax(100px, 1fr)`, so cells never shrink below 100px before they grow. Four presets (three columns, sidebar plus content, photo gallery, dashboard) provide typical starting points.
Reach for Grid when elements must align in two dimensions — page shells, card walls, dashboards — and for Flexbox when a single row or column flows. The generator writes the shorthand `gap` when both axes match and separate `row-gap` / `column-gap` lines when they differ.
How to use this tool
Set the tracks
Drag the column and row sliders; the preview redraws as you go.
Space the cells
Adjust column gap and row gap independently, each up to 64px.
Pick track sizing
Keep 1fr for equal flexible tracks, or turn it off for minmax(100px, 1fr).
Copy the CSS
Paste the generated .grid-container rule straight into your stylesheet.
Use cases
Building a card grid with responsive tracks
Drop the default three-column rule into a .grid-container wrapper, place the cards as direct children, and the browser equalises them at every breakpoint without media queries.
Composing a sidebar + main + aside layout
Switch rows to 1 and bump columns to 3, then add `grid-template-areas` for named regions (e.g. `'nav main aside'`). The generator handles the heavy lifting for grid-template-columns/rows; you add area names by hand.
Locking row height for a dashboard
Set rows to a fixed number and the cells become equal-height blocks, useful for KPI cards that should not stretch with their contents. Combine with align-items: start when you want content to stay top-aligned.
Prototyping photo galleries before writing media queries
Start at 4 columns at full width; let the browser narrow the tracks automatically when the container shrinks. Promote to auto-fit/auto-fill only when you need explicit minimum widths.
Track sizing options
| Option | When to use it |
|---|---|
| repeat(n, 1fr) | Equal flexible columns that share the available width |
| minmax(100px, 1fr) | Responsive tracks with a minimum width that grow to fill space |
| gap | Single value when row and column spacing are equal |
| row-gap / column-gap | Separate values when vertical and horizontal spacing differ |
Common mistakes
Mistake:Forgetting that grid containers collapse to one column by default.
Fix:Children without an explicit grid-area or grid-column/grid-row end up in row 1 / column 1. Set grid-template-columns to 1fr (or use the generator) so the layout produces actual columns instead of stacked children.
Mistake:Mixing `gap` and `row-gap` / `column-gap` on the same rule.
Fix:Either the shorthand `gap` or the long form is enough — but combining them makes the cascade hard to reason about. The generator emits `gap` when row==column and the long form when they differ; pick one.
Mistake:Choosing minmax(0, 1fr) by reflex on every column.
Fix:minmax(0, 1fr) is needed when long unbroken content (URLs, code blocks) would otherwise break out of the track. For cards and short text the safer default is minmax(100px, 1fr) — the builder emits this when you toggle useFr off.
Mistake:Setting rows and expecting items to fill them.
Fix:CSS Grid creates row tracks, but children only fill them if you actually have that many children. Use grid-auto-rows: minmax(… , 1fr) so the implicit rows you create (by adding a fourth child) keep matching the explicit ones.
Mistake:Putting grid on the wrong container.
Fix:Display: grid applies to direct children. Wrapping a card already inside a flex item will not produce a grid layout — promote the wrapper or move the class up. The generator always works on the inner grid container, not the page root.
Frequently asked questions
What does the fr unit mean?
fr is a flexible fraction of the leftover space in the grid container. repeat(3, 1fr) creates three equal columns: after fixed-size items and gaps are subtracted, each track receives one third of what remains.
What is the difference between auto-fit and auto-fill?
Both pack as many minmax() tracks into a row as fit; auto-fill keeps empty tracks reserved while auto-fit collapses them so existing items stretch. This generator writes an explicit repeat(N, …) count instead, so the layout stays identical at every width.
When should I use Grid instead of Flexbox?
Use Grid when content must align on both axes at once — pages, galleries, dashboards. Use Flexbox for one-dimensional runs such as a toolbar or nav row. They compose well: a Grid page often contains Flexbox components.
Can I export the layout as Tailwind classes?
Not directly. The tool copies plain CSS — grid-template-columns, grid-template-rows and gap — which works in any project. With Tailwind, wrap the declarations in an arbitrary-value class such as grid-cols-[repeat(3,1fr)] or paste them into your CSS.
Related guides
References & standards
Related tools
CSS Grid Named Areas Builder
Visually paint CSS Grid named areas and generate deterministic grid-template-areas, track sizes, and grid-area rules.
Box Shadow Generator
Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.
Px to Rem
Convert Pixels to REM units and vice versa (16px default).
Tailwind Theme Builder
Build custom Tailwind CSS themes with color palettes and generate tailwind.config.ts output