What values can I use for grid-template-columns?

You can use any valid CSS track-size values: fixed lengths (px, em, rem), percentages, the flexible "fr" unit, "auto", "min-content", "max-content", or the repeat() function. For example: "1fr 1fr 1fr", "200px 1fr auto", or "repeat(4, 1fr)" all produce valid column definitions.

What does the "fr" unit mean?

The "fr" (fraction) unit distributes available space proportionally. "1fr 2fr" splits the container so the second column is twice as wide as the first after fixed-size columns are accounted for. It is the most flexible unit in CSS Grid.

How does item placement with column-start and column-end work?

Grid lines are numbered starting at 1. "column-start: 1; column-end: 3" makes an item span from line 1 to line 3, covering 2 column tracks. You can also use negative numbers (-1 refers to the last line) or the "span" keyword.

What is grid-gap versus gap?

"gap" (formerly "grid-gap") sets the spacing between rows and columns. It accepts one value for equal spacing or two values (row-gap column-gap) for separate control. Modern browsers support both; "gap" is the recommended property.

Can I use this tool to generate responsive grids?

The tool generates the core CSS Grid declaration. For responsive layouts, wrap the output in media queries or use auto-fill/auto-fit with minmax() in your column definition, for example: "repeat(auto-fill, minmax(200px, 1fr))".

CSS Grid Playground

Name: CSS Grid Playground
Availability: InStock
Author: Nham Vu

Build CSS Grid layouts visually: set columns, rows, gap, and item placement, then copy the ready-to-use CSS.

Grid Settings

grid-template-columns

Separate tracks with spaces. Use fr, px, %, auto, repeat().

grid-template-rows

Leave blank to let rows auto-size.

gap 16px

Grid Items

Live Preview

CSS Output

Copied!

Summary

Build CSS Grid layouts visually: set columns, rows, gap, and item placement, then copy the ready-to-use CSS.

How it works

Use the Columns field to define column tracks, e.g. "1fr 1fr 1fr" or "200px auto 1fr".
Use the Rows field to define row tracks, e.g. "100px auto" or "repeat(3, 1fr)".
Adjust the Gap slider to set spacing between grid cells.
Add grid items with the Add Item button, then set column-start, column-end, row-start, and row-end for each.
Watch the live preview update instantly as you change any setting.
Click Copy CSS to grab the complete grid CSS declaration block.

Use cases

Rapidly prototyping page layouts without leaving the browser.
Learning CSS Grid by seeing how track definitions translate to visual layouts.
Generating grid CSS for complex multi-column dashboards and cards.
Testing item placement with grid-column and grid-row span values.
Copying production-ready CSS Grid code into any project.
Teaching CSS Grid concepts interactively in workshops or classrooms.

Frequently Asked Questions

Last updated: 2026-06-09 · Reviewed by Nham Vu