CSS Grid is a two-dimensional layout system for the web. It lets you define rows and columns and place items precisely within a grid container, making complex page layouts straightforward and responsive.

How do I use the CSS Grid Playground?

Add or remove column and row tracks, adjust gap sizes, set alignment options, and optionally define named grid areas. Click on items in the preview to edit their grid-column, grid-row, or grid-area placement. Copy the generated CSS with one click.

What are CSS Grid named areas?

Named grid areas let you assign names to regions of your grid using the grid-template-areas property. Each row is a quoted string with space-separated names. Items can then reference these names with grid-area, making layouts more readable.

Is this tool free to use?

Yes, the CSS Grid Playground is completely free with no signup required. It runs entirely in your browser, so your data never leaves your device.

Free CSS Grid Playground

Build CSS Grid layouts visually. Define columns, rows, gaps, named areas, and alignment. Click items to resize spans, load preset layouts, and copy the generated CSS code instantly.

Columns

Rows

Gap

Column 12px

Row 12px

Auto Flow

Direction

Alignment

justify-items

align-items

justify-content

align-content

Grid Areas (optional)

Define named areas using quoted strings. Each line is a row. Use "." for empty cells.

Selected Item

grid-column /

grid-row /

grid-area

justify-self

align-self

Color

Live Preview

Generated CSS

Need something more powerful?

Let us build it for you. Custom APIs, dashboards, automations — whatever you need.

Start a Project →

Open source

IT-Tools

269 free tools. No signup. Open source. Built by Christian Bucher.

IT-Tools Browse 269 Free Tools →