Free CSS Grid Playground

Design layouts with a visual CSS Grid editor.

A CSS Grid playground is an interactive visual editor that lets you define rows, columns, spacing, and item placement while seeing the layout update instantly. This free CSS grid generator helps kids and beginners learn CSS Grid with real layouts instead of abstract syntax alone.

css grid playgroundcss grid generatorcss grid layout toollearn css gridcss grid visual editor

Want more than a grid layout tool? Explore the full Zap Code builder to turn layouts into real apps and games.

What this tool includes

Preset grid templates

Start from holy grail, sidebar, or gallery layouts before making them your own.

Drag and resize tiles

Move items visually across the stage and change how many tracks each tile spans.

Live code output

Copy the generated CSS as the grid-template and placement rules update in real time.

Interactive CSS Grid Playground

Adjust track definitions, drag items to new cells, resize spans, and keep the preview plus generated CSS in sync while you learn.

Preset Layouts

Load common CSS Grid patterns

Each preset starts with sensible tracks and item placements so you can reverse-engineer real layouts before customizing them.

Grid Properties

Control rows, columns, spacing, and alignment

Grid becomes easier to understand when you can compare track sizing with item placement in the same screen.

grid-template-columns

Examples: 220px minmax(0, 1fr) 180px or repeat(4, minmax(0, 1fr))

grid-template-rows

Examples: 96px minmax(220px, 1fr) 88px or repeat(3, 120px)

align-items

justify-items

align-content

This becomes more visible when the grid has extra room around its tracks.

justify-content

gap16px

3 columns / 3 rows detected

Grid Items

Tune item placement or use the visual stage

Drag items in the preview on desktop or mobile, then fine-tune the row and column values here if you want exact control.

Header

column 1 / span 3 · row 1 / span 1

Label

column start1

column span3

row start1

row span1

Navigation

column 1 / span 1 · row 2 / span 1

Label

column start1

column span1

row start2

row span1

Main story

column 2 / span 1 · row 2 / span 1

Label

column start2

column span1

row start2

row span1

Sidebar

column 3 / span 1 · row 2 / span 1

Label

column start3

column span1

row start2

row span1

Footer

column 1 / span 3 · row 3 / span 1

Label

column start1

column span3

row start3

row span1

Live Preview

Holy grail

A three-column page layout with header, nav, main content, sidebar, and footer.

3 columns3 rowsgap 16pxalign-items stretchjustify-items stretch

Grid item

Header

col 1 / span 3

row 1 / span 1

Grid item

Navigation

col 1 / span 1

row 2 / span 1

Grid item

Main story

col 2 / span 1

row 2 / span 1

Grid item

Sidebar

col 3 / span 1

row 2 / span 1

Grid item

Footer

col 1 / span 3

row 3 / span 1

Drag a tile to move it. Use the corner handle to resize its row and column span. If you are on a smaller screen, the numeric item controls below the preview are an easier way to place tiles precisely.

Generated CSS

Copy the live output

The CSS below updates as soon as you change grid tracks, spacing, alignment, or item placement.

.grid-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 180px;
  grid-template-rows: 96px minmax(220px, 1fr) 88px;
  gap: 16px;
  align-items: stretch;
  justify-items: stretch;
  align-content: stretch;
  justify-content: stretch;
}

.grid-item {
  min-height: 5rem;
  padding: 1rem;
  border-radius: 1.25rem;
}

/* Item 1: Header */
.grid-item:nth-child(1) {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
}

/* Item 2: Navigation */
.grid-item:nth-child(2) {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}

/* Item 3: Main story */
.grid-item:nth-child(3) {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
}

/* Item 4: Sidebar */
.grid-item:nth-child(4) {
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
}

/* Item 5: Footer */
.grid-item:nth-child(5) {
  grid-column: 1 / span 3;
  grid-row: 3 / span 1;
}

Use the generated rules with a `.grid-layout` wrapper and `.grid-item` children in your own project.

How to use this CSS grid layout tool

Start with a real CSS Grid preset

Load the holy grail, sidebar, or gallery template to begin from a practical layout instead of a blank canvas.

Edit the grid tracks and alignment rules

Change grid-template-columns, grid-template-rows, gap, and alignment settings to understand how the full container behaves.

Drag tiles and resize their spans

Move items around the stage and use the resize handle to change how many rows or columns each item covers.

Copy the generated CSS

The CSS updates live as you edit the layout, so you can paste the working grid rules directly into a project or lesson.

Frequently asked questions about CSS Grid

Common questions about Grid tracks, spacing, placement, and how Grid compares with Flexbox.

What is a CSS Grid playground?

A CSS Grid playground is an interactive visual editor where you adjust grid container properties and move items around a layout to see the result immediately. It makes CSS Grid easier to learn because rows, columns, spacing, and placement update in real time.

What does grid-template-columns do?

grid-template-columns defines the size and number of columns in the grid. You can mix fixed values like 200px with flexible tracks like 1fr or patterns such as repeat(4, minmax(0, 1fr)) to create responsive layouts.

When should I use CSS Grid instead of Flexbox?

Use CSS Grid when you need two-dimensional layout control across rows and columns at the same time. Flexbox is usually better for one-dimensional alignment such as navbars, button groups, or simple horizontal and vertical stacks.

How do gap and alignment affect a grid layout?

gap controls the spacing between tracks, while align-items, justify-items, align-content, and justify-content control how items and the whole grid sit inside the available space. Testing them together is one of the fastest ways to understand how Grid distributes content.

Can beginners learn CSS Grid with a visual editor?

Yes. A visual CSS Grid editor helps beginners connect the code to the layout they see on screen, which makes concepts like spans, track sizing, and placement much easier to remember than reading syntax alone.

Keep exploring with more free tools

Compare Grid with Flexbox, test motion, and then head back to Zap Code to build a full project from the layout you just sketched.

Visit zapcode.dev

Design layouts with a visual CSS Grid editor.

Interactive CSS Grid Playground

Load common CSS Grid patterns

Control rows, columns, spacing, and alignment

Tune item placement or use the visual stage

How to use this CSS grid layout tool

Start with a real CSS Grid preset

Edit the grid tracks and alignment rules

Drag tiles and resize their spans

Copy the generated CSS

Frequently asked questions about CSS Grid

What is a CSS Grid playground?

What does grid-template-columns do?

When should I use CSS Grid instead of Flexbox?

How do gap and alignment affect a grid layout?

Can beginners learn CSS Grid with a visual editor?

Keep exploring with more free tools

CSS Flexbox Playground

CSS Animation Playground

HTML Color Picker