Uttir

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.

CSS Grid Playground — 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.

All rendering happens locally. The CSS you generate never leaves your browser.

Was CSS Grid Playground useful?

What is css grid playground?

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 it

  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.

Frequently asked questions

Related tools

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

Build linear and radial CSS gradients visually. Pick colors, drag stops, copy the CSS.

CSS Minifier

Shrink CSS by stripping comments, collapsing whitespace, and tightening punctuation. See byte savings live.

Color Picker

Pick any color and copy it as HEX, RGB, or HSL.