A fraction of the remaining free space. 'repeat(3, 1fr)' splits the container into three equal columns. Mix with fixed sizes: '200px 1fr' gives a 200px sidebar and a flexible main area.

When should I use auto-fit vs auto-fill?

Both create as many tracks as fit. auto-fit collapses empty tracks; auto-fill keeps them. For responsive card grids ('repeat(auto-fit, minmax(180px, 1fr))') auto-fit is usually what you want.

Why don't items align the way I expect?

justify-items / align-items align each cell's content inside its track. For container-level alignment of the whole grid, use justify-content / align-content (not in this tool yet).

Can I name lines or areas?

Yes in real CSS, but the playground sticks to the most common visual properties. Named lines / grid-template-areas are powerful but harder to demo with a generic preview.

CSS Grid Playground

Edit grid-template-columns and grid-template-rows directly or pick from common presets (3 cols, sidebar, holy grail, auto-fit cards). Adjust gap, justify-items, and align-items with chips; tweak how many items show in the preview. The preview reflects every change live, and the CSS output is ready to paste. Companion to the Flexbox Playground for the other half of CSS layout.

—

Templates

Click a preset to load it into the column / row fields.

grid-template-columnsgrid-template-rows

gap (px)Items

justify-items

align-items

Preview

CSS

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 12px;
justify-items: stretch;
align-items: stretch;

How to use

Pick a template preset or write your own grid-template values.
Set gap and how many items to render.
Adjust justify-items / align-items with the chips.
Copy the CSS for your project.

Frequently asked questions

What does fr mean?: A fraction of the remaining free space. 'repeat(3, 1fr)' splits the container into three equal columns. Mix with fixed sizes: '200px 1fr' gives a 200px sidebar and a flexible main area.
When should I use auto-fit vs auto-fill?: Both create as many tracks as fit. auto-fit collapses empty tracks; auto-fill keeps them. For responsive card grids ('repeat(auto-fit, minmax(180px, 1fr))') auto-fit is usually what you want.
Why don't items align the way I expect?: justify-items / align-items align each cell's content inside its track. For container-level alignment of the whole grid, use justify-content / align-content (not in this tool yet).
Can I name lines or areas?: Yes in real CSS, but the playground sticks to the most common visual properties. Named lines / grid-template-areas are powerful but harder to demo with a generic preview.

Related tools

CSS Flexbox Playground

Visually pick flex-direction, justify-content, align-items, and gap — copy the resulting CSS or Tailwind class.

Developer 0 0

CSS Filter Playground

Visually compose blur, brightness, contrast, hue, sepia, invert, and more — copy the CSS filter or Tailwind arbitrary value.

Color 0 0

CSS Animation Generator

Build a CSS animation visually — pick a preset, tweak duration/easing/iteration, see the preview, and copy the generated keyframes.

Developer 0 0

CSS clamp() Calculator (Fluid Typography)

Build a fluid `font-size: clamp(...)` that scales smoothly between two viewport widths — copy a one-liner.

Color 0 0

CSS clip-path Builder (Circle, Ellipse, Polygon, Inset)

Visual builder for the CSS `clip-path` property — pick a shape (circle, ellipse, inset, or polygon), tweak the numbers with sliders or click the preview to add polygon points, and copy a ready-to-paste CSS declaration. 10 shape presets included (triangle, hexagon, star, arrow, message bubble, plus, …).

Color 0 0

Cron Expression Builder

Build a cron expression by clicking — hourly, daily, weekly, monthly, or fully custom — pairs with the Cron Explainer.

Developer 0 0