CSS Grid Playground
Visually compose CSS Grid templates, gaps and placement, then copy the layout CSS.
Click a numbered item in the grid to select and reposition it.
—
—
—
—
No items yet. Add an item to place it on the grid.
PresetsAbout CSS Grid Playground
The CSS Grid Playground composes real grid layouts visually. Add and remove column and row tracks to shape grid-template-columns and grid-template-rows, set the column and row gaps, and tune all four alignment properties — justify-items, align-items, justify-content and align-content — while the preview reflects every change instantly.
Item placement is where grids get powerful: add items, click one in the preview to select it, and position it with column start, column span, row start and row span. That is how sidebars, headers and feature cells span multiple tracks — the technique behind almost every real-world grid layout.
Three presets — holy grail, dashboard and gallery — load classic page structures you can dissect and adapt. When the layout is right, copy the generated CSS, containing the complete grid container rules and each item’s placement.
How to use CSS Grid Playground
- Add or remove column and row tracks to define the grid template.
- Set the column gap and row gap.
- Adjust the alignment controls: justify-items, align-items, justify-content and align-content.
- Add items, click one in the preview, and set its column/row start and span to place it.
- Load the holy grail, dashboard or gallery preset to study a classic layout.
- Copy the generated CSS into your stylesheet.