# CSS Grid Playground

> Visual playground for CSS Grid. Define rows, columns, and gaps, place items by area or line number, and copy the generated CSS.

URL: https://uttir.com/css-grid-playground
Categories: web-tools, developer-tools
Privacy: All rendering happens locally. The CSS you generate never leaves your browser.

## About

A visual editor for CSS Grid. Define your grid with grid-template-columns and grid-template-rows using the fr, px, %, em, and auto units. Place items by line number, named area, or named line. See the layout update in real time and copy the generated CSS.

Useful for learning grid, prototyping a layout before writing code, or debugging a grid issue. The generated CSS is plain — no preprocessor, no framework.

## How to use

1. **Set columns and rows** — Set the number of columns and rows, and their sizes (e.g. 1fr 1fr 200px).
2. **Place items** — Add items with the + button. Each item can be placed by line number (grid-row / grid-column) or by named area.
3. **Edit named areas** — Edit named areas with the textarea below the preview — the syntax is the same as grid-template-areas.
4. **Copy the generated CSS** — Copy the generated CSS from the right-hand panel.

## FAQ

### What is the fr unit?

fr is a fractional unit that distributes remaining space in the container. 1fr 1fr 1fr gives three equal columns. 1fr 2fr gives a 1:2 ratio. fr only works with grid-template-columns / grid-template-rows.

### grid-template-columns vs grid-template-rows?

grid-template-columns defines the vertical tracks (how many columns and how wide each is). grid-template-rows defines the horizontal tracks (how many rows and how tall each is). Use grid-auto-rows / grid-auto-columns for implicitly created tracks.

### How do named areas work?

Set grid-template-areas to a string with one row per line and one word per column. Use the same word in grid-area on an item to place it. Empty cells are a single dot (.). Example: "header header" / "sidebar main" places header across the top, sidebar on the left, main on the right.

## Related tools

- [CSS Flexbox Playground](https://uttir.com/css-flexbox-playground) — Visual playground for CSS Flexbox. Adjust container and item properties with sliders, see the live layout update, and copy the generated CSS.
- [CSS Gradient Generator](https://uttir.com/css-gradient-generator) — Build linear and radial CSS gradients visually. Pick colors, drag stops, copy the CSS.
- [CSS Minifier](https://uttir.com/css-minifier) — Shrink CSS by stripping comments, collapsing whitespace, and tightening punctuation. See byte savings live.
- [Color Picker](https://uttir.com/color-picker) — Pick any color and copy it as HEX, RGB, or HSL.

---

For the full HTML page with the live tool, visit https://uttir.com/css-grid-playground.
This file is the markdown rendering at https://uttir.com/css-grid-playground.md. See https://uttir.com/llms.txt for a site-wide summary.