Zero Snippet

CSS Grid playground — interactive grid template lab with live preview, copyable CSS, and JSON layout import

This free online CSS Grid playground helps you prototype grid-template-columns, grid-template-rows, gap, justify-items, align-items, justify-content, align-content, and grid-auto-flow without guessing in DevTools. Click any numbered cell to edit grid-column and grid-row using start lines and spans. Use Copy CSS (copy icon) for production rules; use Upload JSON (upload icon) to restore a saved layout. Everything runs in your browser. For one-dimensional rows and toolbars, pair this with the Flexbox playground; for accessible text and UI colors, use the color contrast checker. Browse all design and color tools on the home page.

Grid items

Click a numbered cell to edit its grid-column and grid-row span.

Tracks
Gap & alignment
Selected item (1)

Rename .grid-container to match your markup. Child rules use :nth-child in DOM order. Use Download JSON to save this layout and Upload JSON (upload icon) to restore it.

Why use a CSS Grid playground for real interface work?

Teams search for a CSS Grid generator, grid layout visualizer, or interactive grid tutorial because track sizing and placement interact: changing fr units, minmax(), or repeat() shifts every line number. A live preview makes it obvious how implicit rows grow when children need more space, and how dense packing backfills holes when you use grid-auto-flow: dense. This page targets those workflows with presets, custom track lists, per-item spans, and copy-ready CSS. When your stylesheet grows, clean it up with the CSS formatter and minifier.

Common product patterns— dashboard shells, marketing sections with asymmetric columns, image galleries, and responsive card grids—map naturally to Grid. After you lock the outer grid, polish inner components with the border radius generator and box shadow generator, and add depth with the gradient generator.

CSS Grid guide: tracks, lines, gaps, and alignment

grid-template-columns and grid-template-rows define explicit tracks. Between and around them, gap (or row-gap / column-gap) inserts gutters without margin hacks. Line numbers start at 1 from the start edge; this tool generates grid-column: <start> / span <n> and the same for rows so you can reason about spans without counting every line by hand. justify-items and align-items align each item inside its grid area; justify-content and align-content distribute extra space when the grid is smaller than the container— for example centering a fixed-width grid in a wide viewport.

How to use this CSS Grid playground (step by step)

  1. Under Tracks, choose column and row presets (repeat(4, minmax(0, 1fr)), sidebar layouts, auto-fill, and more) or switch to Custom and paste your own track list. Set grid-auto-flow for row-first, column-first, or dense packing.
  2. Under Gap & alignment, adjust row and column gaps, then tune justify-items, align-items, justify-content, and align-content to match your design spec.
  3. Click a numbered cell in the preview. Under Selected item, set column start, column span, row start, and row span. Use Add item and Remove (up to twelve items) or Reset demo to restore the starter grid.
  4. Open Generated CSS and press Copy CSS (copy icon). Rename .grid-container to your BEM or utility class name.
  5. Optional: click Download JSON to save the full layout, then use Upload JSON (upload icon) later to continue editing the same structure.

CSS Grid vs Flexbox: practical split for production apps

Grid is the default choice for page-level layout and two-dimensional regions where both axes matter at once. Flexbox stays ideal for distributing a row of chips, aligning a label beside an input, or building a sticky footer inside a card. Ship the outer structure here, then open the Flexbox playground for the inner one-dimensional details. For multi-stop backgrounds on grid areas, the CSS gradient generator exports matching gradient syntax.

Related design and developer tools

More utilities from our catalog:

  • Color Picker & Converter — Pick colors and copy HEX, RGB, HSL, and CMYK values for design systems and handoff.
  • Color Contrast Checker — Test text and background pairs against WCAG AA and AAA contrast ratios for accessible UI.
  • Color Palette Generator — From one base hue, build complementary, triadic, analogous, and monochrome palettes.
  • Gradient Generator — Design linear and radial gradients visually and copy production-ready CSS in seconds.
  • Tint & Shade Generator — Generate lighter tints and darker shades from a brand color for consistent UI scales.
  • Color Blindness Simulator — Preview images or palettes under common color-vision deficiencies to validate inclusive design.
  • Box Shadow Generator — Tune offset, blur, spread, color, and inset shadows with live preview and copyable CSS.
  • Border Radius Generator — Adjust each corner visually and export shorthand border-radius for cards and buttons.
  • CSS Gradient Generator — Build multi-stop gradients with angles and stops—outputs clean, modern CSS gradients.
  • Flexbox Playground — Tweak flex container and item properties and see layout updates in real time.
  • Favicon Generator — Create favicon.ico and PNG sizes from an image or text for every device and browser tab.

Frequently asked questions

What is a CSS Grid playground?
A CSS Grid playground is an interactive layout lab where you edit grid-template-columns, grid-template-rows, gap, alignment, and per-item grid-column and grid-row rules while a live preview updates instantly. You copy the generated CSS into your project—useful for learning grid placement without juggling DevTools panels.
When should I use CSS Grid instead of Flexbox?
Use CSS Grid when you need two-dimensional templates: dashboards, card galleries with explicit tracks, full-page shells, and overlapping regions. Use Flexbox for one-dimensional rows or columns (nav bars, toolbars, form fields). Most production apps combine both. After prototyping grid here, one-dimensional tweaks often fit our Flexbox Playground.
What is the difference between gap, row-gap, and column-gap?
gap sets both row and column gutters at once (in this tool via two sliders that output gap: row column). row-gap and column-gap let you set them independently; the generated CSS uses the shorthand when both values differ or a single length when they match.
How do grid-column and grid-row work with line numbers?
Grid lines are numbered starting at 1 from the start edge of the grid. This tool expresses placement as a starting line plus span—for example grid-column: 1 / span 2 means begin at line 1 and cover two tracks. Implicit rows appear automatically when items need more space than your template rows define.
What do justify-items and align-items do on a grid container?
justify-items aligns each grid item inside its column along the inline axis; align-items aligns inside its row along the block axis. Common pairs are stretch (default, fill the cell) and center for icon grids. justify-content and align-content distribute extra space around the whole grid when the container is larger than the sum of tracks.
Does this CSS Grid tool upload my layout to a server?
No. Preview and CSS generation run entirely in your browser. The Upload button only reads a JSON file you choose locally to restore saved settings; nothing is transmitted to us. Copy CSS uses your clipboard locally.
Can I use fr, minmax(), and repeat() in column and row templates?
Yes. Choose a preset or switch to custom and type valid track lists such as repeat(4, minmax(0, 1fr)), 240px 1fr, or repeat(auto-fill, minmax(120px, 1fr)). Invalid values may not render as expected in the preview; simplify the expression or check browser support for advanced functions.