CSS Grid Generator

Set your columns and rows, size each track in fr, px or auto, and adjust the gaps. The numbered preview grid redraws as you go, and the grid-template CSS is ready to copy.

This CSS grid generator builds a grid layout from a few controls instead of trial and error in your stylesheet. Pick how many columns and rows you want, size each track in fr, px or auto, and set the row and column gaps. The numbered preview grid redraws on every change so you can see the grid layout maker output before you commit, and the grid-template CSS updates alongside it. Copy the rule when the shape looks right — it runs entirely in your browser.

1
2
3
1
2
1
2
3
4
5
6
CSS
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 16px;

How it works

  1. 1

    Set columns and rows

    Choose how many tracks you want in each direction with the sliders. Each track gets its own size control.

  2. 2

    Size the tracks and gaps

    Give every track a value in fr, px or auto, then dial in the row and column gaps as this css grid template tool rebuilds the layout.

  3. 3

    Copy the CSS

    When the preview grid matches what you pictured, copy the grid-template rule and paste it into your stylesheet.

Instant & 100% private — nothing is uploaded

Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.

Frequently asked questions

What does the fr unit mean in a grid?
An fr is a fraction of the leftover space. Two columns at 1fr each split the row evenly; a 2fr next to a 1fr takes twice the width. Mixing fr with px lets some tracks stay fixed while others flex.
Can I mix fixed and flexible columns?
Yes. Set some tracks to px for a fixed width and others to fr or auto so they absorb the remaining space. The grid builder shows the result immediately.
What is the difference between gap and margin here?
Gap adds space between grid tracks only, not around the outside edge. That keeps spacing even between cells without you adding margins to each item.
Does an auto track size to its content?
An auto track grows to fit whatever sits in it. It is handy for a header or sidebar that should be only as tall or wide as its content.
Will CSS grid work in older browsers?
CSS grid is supported in every current browser. Only very old versions like IE11 used an outdated grid syntax, so check your audience if you still support them.

More tools

JSON Formatter & ValidatorBeautify, minify, validate JSON with a collapsible tree view.Code Formatter & MinifierPretty-print or minify JS, TS, CSS, HTML, JSON, SQL and more.YAML ⇄ JSON ⇄ TOML ConverterConvert config between YAML, JSON and TOML, both ways.JSON Schema Viewer & ValidatorRender a JSON Schema as a tree and validate data against it.Markdown Editor (Live Preview)Write Markdown with a live, side-by-side HTML preview.Mermaid Live EditorTurn Mermaid text into flowcharts and diagrams, live.

More from the Hivly network

Free sister tools on our other sites.

Color Palette GeneratorShuffle palettes with the spacebar, lock favourites, copy hex codes.Length ConverterMetres, feet, miles, inches, km and more, instantly.Word CounterCount words, characters, sentences and reading time live.