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?
¿Qué es 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.
Cómo usarlo
-
Set columns and rows
Set the number of columns and rows, and their sizes (e.g. 1fr 1fr 200px).
-
Place items
Add items with the + button. Each item can be placed by line number (grid-row / grid-column) or by named area.
-
Edit named areas
Edit named areas with the textarea below the preview — the syntax is the same as grid-template-areas.
-
Copy the generated CSS
Copy the generated CSS from the right-hand panel.
Preguntas frecuentes
Guías relacionadas
How to Build a CSS Grid Layout (with Real Examples)
A practical guide to CSS Grid: when to use it (and when flexbox is the better choice), the six properties that matter, how named lines and areas work, and how to experiment with a live layout in your browser before committing it to a stylesheet.
The 8 Best Free CSS Tools in 2026 (No Signup, No Upload)
A curated list of the best free CSS tools: gradient generators, box-shadow builders, flexbox / grid playgrounds, minifiers, and animation builders. All run in your browser.
How to Build a CSS Flexbox Layout (with Real Examples)
A practical guide to flexbox: when to use it (and when not to), the six properties that matter, the common gotchas with align-items and flex-basis, and how to experiment with a live layout in your browser before committing it to a stylesheet.
Herramientas relacionadas
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.
Selector de Color
Elige un color de una imagen y obtén los valores HEX, RGB, HSL y CMYK. Gratis, en tu navegador, sin subida.
Last reviewed: 2026-09-25