What is CSS Grid Layout?

CSS Grid Layout is a two-dimensional layout system that divides a container into rows and columns. Items can be placed in any cell and span multiple rows or columns. Unlike flexbox (one-dimensional), grid controls both axes simultaneously, making it ideal for full-page layouts.

What does grid-template-columns do?

grid-template-columns defines the number and size of columns in the grid. Values can be fixed (200px), flexible (1fr), or a mix. "repeat(3, 1fr)" creates three equal-width columns. "repeat(auto-fill, minmax(200px, 1fr))" creates as many columns as fit, each at least 200px wide.

What is the fr unit in CSS Grid?

The fr (fraction) unit represents a fraction of the available space in the grid container. "1fr 2fr" creates two columns where the second is twice as wide as the first. fr units distribute remaining space after fixed-size tracks are accounted for.

How does grid-column span work?

grid-column: span N tells a grid item to stretch across N columns. For example, "grid-column: span 2" makes the item take up two column tracks. Similarly, grid-row: span N spans multiple rows. This is how headers, footers, and featured content items can be made wider or taller than normal grid cells.

What is the Holy Grail layout?

The Holy Grail layout is a classic web layout with a header at the top, a footer at the bottom, and three columns in the middle: a left sidebar, a main content area, and a right sidebar. CSS Grid makes this trivial: set grid-template-columns: 200px 1fr 200px and grid-template-rows: 60px 1fr 60px.

When should I use CSS Grid vs Flexbox?

Use CSS Grid for two-dimensional layouts where you need to control both rows and columns simultaneously (page layouts, dashboards, card grids). Use Flexbox for one-dimensional layouts where items flow along a single axis (navigation bars, button rows, form fields). In practice, most UIs use both: Grid for the outer structure, Flexbox for the inner components.

Free · Browser-only · No sign-up

CSS Grid Generator

Build CSS grid layouts visually. Set template columns, rows, gap, and per-cell span properties with live preview. Includes presets for common layouts like Holy Grail, Sidebar, and Cards.

grid-template-columnsfr unitsCell spansPresetsAuto-fill100% offline

presets:

Container

grid-template-columns

grid-template-rows

column-gap

16px

row-gap

16px

padding

16px

items count

live preview — click a cell to select

css output

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 120px);
  column-gap: 16px;
  row-gap: 16px;
  padding: 16px;
}

Features

Template presets

Holy Grail, Sidebar, Equal 3, 2×2, 4 cols, and Cards presets to start fast

fr and repeat()

Supports the full grid-template syntax including fr units and repeat()

Cell overrides

Click any cell to set col-span, row-span, col-start, and row-start

Gap & padding

Independent column-gap, row-gap, and padding sliders

Item count

Control how many grid items appear in the preview (1–24)

Clean CSS output

Generated CSS is clean and copy-paste ready for any project

How to use

1
Pick a preset
Choose Holy Grail, Sidebar, Equal 3, or another preset to start with a working layout.
2
Adjust columns and rows
Edit the grid-template-columns and grid-template-rows fields with any valid CSS value.
3
Set gap and padding
Use the sliders to control column-gap, row-gap, and grid padding.
4
Configure cells
Click any cell in the preview and use the col-span, row-span, col-start, and row-start controls.
5
Copy CSS
Click Copy to grab the complete CSS and paste it into your stylesheet.

Frequently asked questions

Can I use minmax() in the template column input?

Yes. The column and row inputs accept any valid CSS grid template value, including repeat(), minmax(), auto-fill, auto-fit, fr units, px, em, %, and keyword values like auto.

How do I create a responsive grid that wraps automatically?

Use repeat(auto-fill, minmax(200px, 1fr)) in the grid-template-columns field. This creates as many columns as can fit, each at least 200px wide. No media queries needed — the grid reflows automatically.

What happens when I set grid-column-start?

grid-column-start places the item at a specific column line. Combined with col-span, you control exactly where in the grid the item starts and how wide it is.

Does this tool generate Tailwind grid classes?

This tool outputs vanilla CSS. Use the Tailwind Class Generator tool to build Tailwind grid classes like grid-cols-3 and gap-4.

Related tools

Flexbox Playground

Visually build CSS flexbox layouts

Tailwind Class Generator

Build Tailwind CSS class strings visually

CSS Shadow Generator

Generate CSS box-shadow and text-shadow code