CSS Grid Generator

Build CSS Grid layouts visually and copy the grid-template CSS

Grid settings

Presets:

Live preview

1
2
3
4
5
6

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.

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

  1. Set columns and rows

    Use the sliders to choose how many columns and rows your grid has, or start from a preset.

  2. Adjust the gaps

    Set the spacing between columns and rows; the live preview updates instantly.

  3. Copy the CSS

    Copy the generated .grid-container rule and paste it into your stylesheet.

Track sizing options

OptionWhen 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
gapSingle value when row and column spacing are equal
row-gap / column-gapSeparate values when vertical and horizontal spacing differ

Frequently asked questions

Related tools

Flexbox Playground

Visually configure a CSS flexbox container — set direction, alignment, wrap and gap, see a live preview, and copy production-ready CSS.

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.

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.

CSV to JSON Converter

Paste CSV data and convert it to pretty-printed JSON instantly — supports custom delimiters, header row toggling, and value trimming.

HTML to Markdown Converter

Paste HTML and get clean Markdown. Configurable heading style, bullet marker, and code block style — all processed locally in your browser.