Stax
Tools

CSS Grid Generator

Build CSS Grid layouts visually with live preview.

grid-template-columns

grid-template-rows

1
2
3
4
5
6
7
8
9
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 8px;
}

CSS Grid Generator — Build Complex Layouts Visually Without Memorizing Syntax

CSS Grid is the most powerful layout system available in the browser, capable of creating complex two-dimensional layouts that were previously only possible with JavaScript or hacks. But the syntax — grid-template-columns, grid-template-rows, grid-template-areas, minmax(), repeat(), fr units — has a steep learning curve. This visual generator removes that barrier: configure your grid with controls and copy production-ready CSS instantly.

How to use this generator

Set the number of columns and rows using the sliders, then configure the column template using the fr unit inputs (e.g., 1fr 2fr 1fr for a three-column layout where the middle is twice as wide). Set the row template similarly, then adjust the gap between cells. Use the justify-items and align-items controls to set default child alignment within cells. The live preview shows your grid with numbered cells. Once you're satisfied, click Copy CSS to get the grid container declarations ready to use in your project.

When to use CSS Grid vs Flexbox

CSS Grid shines for two-dimensional layouts where you need control over both rows and columns simultaneously — page-level layouts with header, sidebar, main content, and footer; image galleries with consistent cell sizes; dashboard widgets that need to span multiple rows or columns. Flexbox is better for one-dimensional layouts: a row of navigation links, a group of buttons, or a vertically-stacked form. The two systems compose beautifully — use Grid for the page skeleton and Flexbox inside each grid cell for its content arrangement.

Who uses this tool

Front-end developers use it to prototype complex page layouts before committing them to a component library or design system. Developers learning Grid for the first time use it to understand how fr units and repeat() distribute space visually rather than trying to reason about it abstractly. CSS instructors use it in workshops to demonstrate Grid concepts with instant visual feedback. Designers transitioning to code use it to quickly implement a layout they designed in Figma without needing to memorize the full Grid specification.

Privacy and data handling

This generator runs entirely in your browser — no layout configurations or CSS output are sent to any server. Use it freely on client projects or behind corporate firewalls without data concerns.

Frequently asked questions

What is CSS Grid?
CSS Grid is a two-dimensional layout system that lets you create complex web layouts with rows and columns simultaneously. Unlike Flexbox (which is one-dimensional), Grid controls both axes at once, making it ideal for page-level layouts.
What does repeat(3, 1fr) mean?
repeat(3, 1fr) creates 3 equal-width columns where each column takes one fraction of the available space. 1fr means one fraction unit — all three columns share the space equally. You can mix units: repeat(2, 1fr) 200px creates two flexible columns and one fixed 200px column.
What is the difference between grid-gap and gap?
gap is the modern property (previously grid-gap). It sets the space between rows and columns. You can set row and column gaps independently with row-gap and column-gap, or use the shorthand gap: row-gap column-gap.
When should I use Grid vs Flexbox?
Use Grid for two-dimensional layouts (rows AND columns simultaneously) like full page layouts, card grids, and complex dashboards. Use Flexbox for one-dimensional layouts (either rows OR columns) like navigation bars, button groups, and centering.
What does fr unit mean?
fr stands for fraction. It represents a fraction of the available space in the grid container. 1fr 2fr 1fr creates three columns where the middle is twice outer ones. fr units are calculated after fixed and auto-sized tracks are resolved.

Related tools