CSS Grid Generator
Build CSS Grid layouts visually and copy the grid-template CSS
Grid settings
Live preview
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
}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 helps you build two-dimensional layouts without memorising grid syntax. Set the number of columns and rows, choose flexible fr tracks or fixed minmax() tracks, tune the gaps, and watch a live preview update as you go — then copy the exact grid-template CSS into your project.
CSS Grid is the most powerful layout system in CSS: it controls rows and columns at the same time, making it ideal for page layouts, dashboards, card galleries and forms. This generator produces clean, standards-compliant output that works in every modern browser.
Everything runs locally in your browser — no layout data is sent to a server.
How to use
Set columns and rows
Use the sliders to choose how many columns and rows your grid has, or start from a preset.
Adjust the gaps
Set the spacing between columns and rows; the live preview updates instantly.
Copy the CSS
Copy the generated .grid-container rule and paste it 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
Related guides
References & standards
Related tools
Aspect Ratio Calculator
Calculate dimensions and ratios for images and videos.
Barcode Generator
Generate barcodes in 8 formats (CODE128, EAN13, UPC, and more) — configure line width, height, and text display, then download as SVG or PNG.
Base64 Image Encoder
Open the Image workspace in Base64 Toolbox to resize and convert images to Base64 data URIs, then copy HTML, CSS, Markdown or JavaScript snippets.
Border Radius Generator
Visually craft CSS border-radius values — including the advanced 8-value slash syntax for organic blob shapes — with a live preview and one-click copy.
Cubic Bezier / Easing Generator
Build a CSS cubic-bezier() timing function visually — drag control points, preview common presets, see the easing curve live, and copy the transition-timing-function CSS.
EXIF Viewer & Cleaner
View and remove EXIF metadata from images. See camera info, GPS location, and dates — then download a clean copy.