CSS Grid Generator — Free Visual grid-template Builder
Edit column and row tracks, set the gap, and align items — then copy vanilla CSS or Tailwind v4. Supports fr, auto, minmax(), and the repeat(auto-fit, minmax(...)) responsive-card pattern, with a live preview on every keystroke. Free, 100% in your browser.
stretch
stretch
Range: 1–24 items.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 16px;
justify-items: stretch;
align-items: stretch;
}grid grid-cols-[1fr_1fr_1fr] grid-rows-[auto_auto] gap-4 justify-items-stretch items-stretchEditable Track Lists
Add or remove column and row tracks dynamically. Each track accepts 1fr, auto, fixed lengths, minmax(), repeat() — anything valid CSS Grid syntax permits.
Live Visual Preview
See exactly how your grid will render — track sizes, gaps, alignment — with adjustable cell count from 1 to 24. The preview uses real CSS, not an approximation.
CSS + Tailwind v4 Output
Get vanilla CSS or a Tailwind v4 class string using arbitrary-value syntax (grid-cols-[200px_1fr] etc.) for exact preview parity.
100% Client-Side
No accounts, no uploads. The browser renders the preview exactly as your production code will. Works offline once loaded.
CSS Grid Generator: Build grid-template Visually
A CSS Grid generator turns the grid-template-columns and grid-template-rows properties into an editable list, so you set tracks, gap, and alignment and see the layout render live. Each track accepts fr, auto,min-content, max-content, fixed lengths, minmax(), and repeat(). Copy the result as vanilla CSS or a Tailwind v4 class string. It runs 100% in your browser, free, with no upload.
How to build a CSS grid
- Start from a preset — 3-Column Equal, Sidebar + Content, Holy Grail, or Auto-Fit Cards — or build from the default three
1frcolumns. - Edit each column and row track by typing a value or picking one from the Preset… dropdown. Use Add track to add tracks; the last track cannot be removed.
- Set the gap from 0 to 64px. Toggle Linked off to control row and column gap independently.
- Choose
justify-itemsandalign-items— start, center, end, or stretch — to align items inside their cells. - Adjust the item count (1–24) to fill enough cells to see your row tracks, then Copy the Vanilla CSS or Tailwind v4 output.
What is CSS Grid and how do track lists work?
CSS Grid is a two-dimensional layout system: you declare explicit tracks (columns and rows) on a container with display: grid, and items flow into the cells those tracks create. Unlike Flexbox, which lays out along one axis, Grid controls both axes at once. The track lists are the core: grid-template-columns: 200px 1fr 1fr means a fixed 200px column followed by two columns that split the remaining space equally.
The fr unit, minmax(), and repeat() are defined in the W3C CSS Grid Layout Module Level 2 specification. A key detail the spec makes explicit: the per-keyword behavior of repeat() with minmax(). auto-fit collapses empty trailing tracks and stretches the filled ones; auto-fill keeps those empty tracks reserved. That single keyword decides whether one card sits alone at the left or stretches across the row.
Worked examples: track list → result
Equal columns · gap 16px
grid-template-columns: repeat(3, 1fr); gap: 16px;
Three equal columns at any width — the default card row.
Sidebar + content
grid-template-columns: 240px 1fr;
A fixed 240px sidebar; the main column takes whatever space is left.
Responsive cards · no media queries
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
As many 240px+ columns as fit, stretched to fill the row.
Edge case · the 1fr grid blowout
A 1fr column with a long unbreakable string or a wide image can overflow its container, because 1fr resolves to minmax(auto, 1fr) and that auto floor will not shrink below the content. Swap the track to minmax(0, 1fr) to let it shrink and keep overflow inside the cell.
Track Value Reference — What Each Means
| Value | Meaning | Use |
|---|---|---|
| 1fr | One fraction of available space | Equal-width columns; the most common track value. |
| 2fr / 3fr | Multiple of one fraction | Asymmetric columns — 1fr/2fr makes the second twice as wide. |
| auto | Track sizes to its content | Side bars or sidebars where width depends on text length. |
| min-content | Smallest size the content can be without overflow | Narrow columns that wrap text aggressively. |
| max-content | Width the content wants if given infinite room | Long-form columns that should NOT wrap text. |
| 200px | Fixed length | Sidebars with a known fixed width. |
| minmax(100px, 1fr) | At least 100px; share remaining space | Responsive columns that have a minimum width. |
| repeat(auto-fit, minmax(...)) | Repeat as many columns as fit | The famous responsive-grid one-liner for card layouts. |
CSS Grid vs Flexbox — Which to Use When
| Aspect | CSS Grid | Flexbox |
|---|---|---|
| Dimensions | Two — rows AND columns simultaneously | One — row OR column at a time |
| Sizing model | Container-driven — you define tracks explicitly | Content-driven — items size from their content |
| Best for | Page-level layout, photo galleries, dashboards | Nav bars, button rows, cards inside grid cells |
| Overflow handling | Explicit row/column boundaries | Wrap to new rows/columns automatically |
| Browser support | 98%+ globally (Chrome 57+, Safari 10.1+, FF 52+) | 99%+ globally (Chrome 29+, Safari 9+, FF 28+) |
Rule of thumb: if you can answer "how many rows and how many columns" before writing the CSS, use Grid. If item count or sizing varies dynamically along one axis, use Flexbox.
Six CSS Grid Recipes You Will Use Constantly
Responsive card grid
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
Sidebar + main content
grid-template-columns: 240px 1fr
Three equal columns
grid-template-columns: repeat(3, 1fr)
Hero with header & footer
grid-template-rows: 60px 1fr 40px
Magazine-style 12-col layout
grid-template-columns: repeat(12, 1fr); gap: 16px
Photo gallery with aspect
grid-template-columns: repeat(auto-fill, 200px); grid-auto-rows: 200px
What this generator does that copy-paste snippets miss
The CSS output only splits into row-gap and column-gap when the two values differ; when they match it emits a single gap, which is what you would hand-write. The Tailwind v4 output snaps round gaps to named utilities — 16px becomes gap-4, 24px becomes gap-6 — and only falls back to arbitrary syntax like gap-[18px] for off-scale values, so the class string stays as clean as a human would write it.
The big trap is the 1fr grid blowout above: because 1fr means minmax(auto, 1fr), an oversized image or unbreakable string widens the whole grid instead of staying in its cell. Reach for minmax(0, 1fr) the moment a track holds unpredictable content. And auto-fit vs auto-fill only differ once the items stop filling every column — identical until the last row, then auto-fit stretches and auto-fill leaves gaps.
Runs 100% in your browser
Your work never leaves your device. The preview is real CSS Grid rendered by your browser, and the CSS and Tailwind strings are built locally in JavaScript — no uploads, nothing leaves your device. I tested every preset, all four justify-items/align-items values, linked and independent gaps across the full 0–64px range, and track values from min-content to repeat(auto-fit, minmax(240px, 1fr)). The preview matched the copied CSS in every case, and stayed instant at the 24-item cap.
Related CSS & layout tools
One-dimensional layout inside grid cells
CSS Gradient GeneratorBuild backgrounds for grid items
CSS Box Shadow GeneratorElevate grid cards with depth
Border Radius GeneratorRound the corners of grid cells
CSS Clip-Path GeneratorClip grid items into custom shapes
CSS Filter GeneratorBlur and tint grid images
Glassmorphism GeneratorFrosted-glass overlays on photo grids
CSS Specificity CalculatorScore selector weight for grid rules
CSS BeautifierFormat the grid CSS you copy
CSS MinifierShrink grid CSS for production
Color ConverterConvert HEX, RGB & HSL for grid styles
Aspect Ratio CalculatorSize grid cells to a fixed ratio
Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.
Need a different tool?
Browse all 89 free, in-browser tools — or tell us what we should build next.