What is CSS Grid and when should I use it?

CSS Grid is a two-dimensional layout system that lets you define rows and columns simultaneously. Use it for page-level layouts, card grids, dashboards, and any UI where items need to align in both axes. For one-dimensional layouts (a row of buttons or a vertical stack), Flexbox is often simpler.

What does the fr unit mean?

fr stands for fraction. It represents a fraction of the available free space in the grid container after fixed-size columns are placed. Three columns of 1fr each each take one-third of the container. A 2fr column takes twice as much space as a 1fr column.

What is the difference between column-gap and row-gap?

column-gap sets the space between adjacent columns (the gutters between cells in the same row). row-gap sets the space between adjacent rows. Both can be set independently. The shorthand gap: row-gap column-gap sets both at once.

When should I use auto vs fr for a column?

Use auto when you want a column to size to its content (like a sidebar with a fixed-width navigation). Use fr when you want remaining space distributed proportionally: for example, a main content area that fills whatever space the sidebar does not use.

What does minmax() do?

minmax(min, max) defines a size range for a track. For example, minmax(200px, 1fr) means the column is at least 200px wide but can grow to fill available space. This is the basis for responsive grid layouts that do not need media queries.

What is the Holy Grail layout?

The Holy Grail is a classic web layout with a full-width header, a full-width footer, and three columns in between: a fixed left sidebar, a flexible main content area, and a fixed right sidebar. CSS Grid achieves it in just a few lines.

Does this generate Tailwind CSS classes?

No: the output is standard CSS. Tailwind has its own grid utilities (grid, grid-cols-3, gap-4, etc.) but this tool generates the underlying CSS which you can use with any framework.

Is the generated CSS production-ready?

Yes. The output uses standard CSS Grid properties with broad browser support (all modern browsers). No prefixes are needed. Copy it into a stylesheet or CSS-in-JS object as-is.

Gradient Maker Box Shadow Color Palette Grid Generator PX → REM SVG to JSX SVG Optimizer SVG to Data URL

CSS Grid Generator

Configure columns, rows, gaps, and alignment visually. Copy ready-to-use CSS.

Presets

Columns (3)

Rows (2)

Gap

Column gap16px

Row gap16px

Alignment

justify-items

align-items

Preview: 3×2 grid (6 cells)

Generated CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 16px;
  row-gap: 16px;
}

CSS Grid: the two-dimensional layout system that replaced float hacks

Before CSS Grid landed in browsers in 2017, building a simple three-column layout with a header and footer required floats, clearfixes, or complex flexbox nesting. CSS Grid changed everything by giving developers a true two-dimensional layout primitive. You define the structure once on the container and cells snap into place automatically: no positional offsets, no pseudo-elements, no magic numbers.

The fr unit is CSS Grid's most powerful feature. Unlike percentages, fr values account for gaps automatically, so a three-column 1fr 1fr 1fr layout with 16px gaps has equal columns without any manual margin arithmetic. Combined with minmax() for responsive tracks, CSS Grid enables fluid, media-query-free layouts that adapt to any container width. This generator lets you explore these concepts interactively before writing a single line of CSS.

How to build a CSS grid layout: step by step

1
Start from a preset or build from scratch
Click a preset layout (Holy Grail, 12-Col Grid, Card Grid, Sidebar Layout, Dashboard) to load a starting point, or configure columns and rows manually from the controls.
2
Configure your columns
In the Columns section, set each column's value and unit. Choose fr for flexible fractions, px for fixed widths, % for percentage widths, auto for content-sized columns, or minmax() and fit-content() for responsive ranges.
3
Configure your rows
Add or remove rows the same way as columns. Use auto for rows that size to their content, or fr to distribute remaining height proportionally.
4
Set gaps and alignment
Drag the column-gap and row-gap sliders to set spacing between cells. Use the justify-items and align-items selects to control how cell content is positioned.
5
Copy the generated CSS
The live preview shows the grid with numbered cells. The Generated CSS panel below it shows the complete .container rule: click Copy to grab it.

Related Tools

🌈

Gradient Maker

Build linear, radial, and conic CSS gradients visually with color stops and live preview.

🪄

Box Shadow Maker

Compose multi-layer box shadows with X/Y offset, blur, spread, color, and inset controls.

🎨

Color Palette Generator

Generate complementary, analogous, triadic, and other harmony palettes. Export as CSS vars, SCSS, or JSON.

🔢

PX → REM Converter

Convert px to rem/em and back. Set custom base font size. Batch convert and view standard scale.

Frequently Asked Questions

What is CSS Grid and when should I use it?: CSS Grid is a two-dimensional layout system that lets you define rows and columns simultaneously. Use it for page-level layouts, card grids, dashboards, and any UI where items need to align in both axes. For one-dimensional layouts (a row of buttons or a vertical stack), Flexbox is often simpler.
What does the fr unit mean?: fr stands for fraction. It represents a fraction of the available free space in the grid container after fixed-size columns are placed. Three columns of 1fr each each take one-third of the container. A 2fr column takes twice as much space as a 1fr column.
What is the difference between column-gap and row-gap?: column-gap sets the space between adjacent columns (the gutters between cells in the same row). row-gap sets the space between adjacent rows. Both can be set independently. The shorthand gap: row-gap column-gap sets both at once.
When should I use auto vs fr for a column?: Use auto when you want a column to size to its content (like a sidebar with a fixed-width navigation). Use fr when you want remaining space distributed proportionally: for example, a main content area that fills whatever space the sidebar does not use.
What does minmax() do?: minmax(min, max) defines a size range for a track. For example, minmax(200px, 1fr) means the column is at least 200px wide but can grow to fill available space. This is the basis for responsive grid layouts that do not need media queries.
What is the Holy Grail layout?: The Holy Grail is a classic web layout with a full-width header, a full-width footer, and three columns in between: a fixed left sidebar, a flexible main content area, and a fixed right sidebar. CSS Grid achieves it in just a few lines.
Does this generate Tailwind CSS classes?: No: the output is standard CSS. Tailwind has its own grid utilities (grid, grid-cols-3, gap-4, etc.) but this tool generates the underlying CSS which you can use with any framework.
Is the generated CSS production-ready?: Yes. The output uses standard CSS Grid properties with broad browser support (all modern browsers). No prefixes are needed. Copy it into a stylesheet or CSS-in-JS object as-is.

AlteredIdea vs alternatives

vs other online tools: Everything runs in your browser: private, instant, no account needed.

vs desktop apps: No install required. Works on any device.

vs paid tools: Completely free, unlimited use.

Share:Share on X Share on LinkedIn