AZ Tools

CSS Grid Playground

Developer

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.

justify-items
align-items
Preview
1
2
3
4
5
6
CSS
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 12px;
justify-items: stretch;
align-items: stretch;

How to use

  1. Pick a template preset or write your own grid-template values.
  2. Set gap and how many items to render.
  3. Adjust justify-items / align-items with the chips.
  4. 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

JWT Decoder

Decode a JSON Web Token to inspect its header, claims, and expiration.

Developer00

UUID Generator

Generate random version-4 UUIDs in bulk, with copy.

Developer00

Hash Generator (SHA)

Generate SHA-1, SHA-256, SHA-384, and SHA-512 hashes from text.

Developer00

URL Encoder / Decoder

Percent-encode text for URLs, or decode encoded URLs back to text.

Developer00

Base64 Encoder / Decoder

Encode text to Base64 or decode Base64 back to text, instantly.

Developer00

JSON Formatter & Validator

Format, beautify, minify, and validate JSON right in your browser.

Developer00