CSS Grid Playground

The CSS Grid Playground is an interactive browser tool that lets you configure all CSS Grid container and item properties visually. Changes appear instantly in the live preview, and ready-to-use CSS code is generated automatically for you to copy into your project.

You can configure grid-template-columns, grid-template-rows, gap (or separate column-gap and row-gap), justify-items, align-items, justify-content, and align-content. All values support any valid CSS syntax including fr units, repeat(), minmax(), and auto.

Select the item using its numbered tab in the Item Properties panel, then set grid-column-start, grid-column-end, grid-row-start, and grid-row-end. Enter a number for an explicit grid line or leave it as 'auto' for automatic placement. You can also type 'span 2' in the end field to make an item span multiple tracks.

Presets are pre-built grid configurations for common layouts: 'Holy Grail' creates a classic header/nav/main/aside/footer layout, 'Sidebar + Main' builds a two-column sidebar layout, '3-Col Masonry' demonstrates spanning items, 'Dashboard' shows a four-column metrics dashboard, 'Blog Layout' sets up a typical article with sidebar, and 'Card Grid' creates an even three-column card layout. Click any preset to apply it instantly.

grid-template-columns accepts any valid CSS track listing: fixed lengths like '200px 1fr', the repeat() function like 'repeat(3, 1fr)', minmax() like 'repeat(3, minmax(100px, 1fr))', auto-fill or auto-fit like 'repeat(auto-fill, minmax(150px, 1fr))', or named lines like '[start] 1fr [end]'. Type any valid CSS value directly into the field.

The fr (fractional) unit represents a fraction of the available space in the grid container. '1fr 1fr 1fr' divides space equally into three columns. '2fr 1fr' gives the first column twice as much space as the second. Pixel values are fixed regardless of container size. Combining both (e.g. '200px 1fr') lets you create fixed sidebars with flexible main areas.

justify-items controls how items are aligned within their grid cells along the inline axis. justify-content controls how the entire grid is aligned within the grid container when there is extra space. Similarly, align-items aligns items within their cells on the block axis, while align-content aligns the whole grid vertically within the container.

justify-self overrides justify-items for a single grid item, controlling its inline alignment within its cell. align-self overrides align-items for a single item, controlling its block alignment within its cell. Both accept: auto, start, end, center, and stretch.

Set the grid-column-start and grid-column-end (or grid-row-start and grid-row-end) to create a span. For example, to span from column 1 to column 3, set start=1 and end=3. Alternatively, leave start as 'auto' and set end to 'span 2' to span two tracks from wherever the item is automatically placed.

You can add up to 8 grid items. Click the '+ Add Item' button to add more. Each item is color-coded so you can identify it in both the settings panel and the live preview. Click directly on any item in the preview to select it for editing.

Yes. By default a single gap value applies to both column and row gutters. Check the 'Use custom column/row gaps' option to set column-gap and row-gap independently using separate sliders, allowing different horizontal and vertical spacing between tracks.

Two copy buttons are available: one for the container CSS block (.grid-container) and one for all CSS including both container and item rules. Click either 'Copy CSS' button to copy the code to your clipboard and paste it into your project.