Controls
Live Preview
—
How the Grid Playground Works
Build CSS Grid layouts visually or with raw code. Start from presets, customize in real time, and copy production-ready CSS.
Visual Builder
Define rows, columns, and gaps visually. Drag sliders or enter exact values — the grid updates in real time. No CSS knowledge required to start.
Raw CSS Input
Switch to raw mode and write grid-template-columns, grid-template-rows, and gap by hand. The preview reflects your code as you type.
Presets Library
Start from common layout patterns — holy grail, sidebar, dashboard, card grid, and more. Each preset generates editable code you can customize.
Copy CSS
Copy the generated CSS Grid code with one click. The output is clean, production-ready, and uses modern grid syntax compatible with all major browsers.
Frequently Asked Questions
CSS Grid is a two-dimensional layout system built into CSS. It lets you define rows and columns and place elements into cells without floats or positioning hacks. Grid is supported in all modern browsers and is the standard for complex page layouts.
Use Grid for two-dimensional layouts where you need control over both rows and columns simultaneously — dashboards, card grids, and page templates. Use Flexbox for one-dimensional alignment — navbars, button groups, and inline elements.
Yes. A grid item can itself be a grid container. This is common in dashboard layouts where the overall page is a grid and individual panels contain their own sub-grids for internal layout.
The fr unit stands for "fraction of available space." 1fr 2fr means the second column gets twice the space of the first. It is the most flexible way to size grid tracks and avoids manual percentage calculations.