UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

CSS Grid Playground

Prototype grid templates, gaps, and alignment with a responsive preview and CSS export.

About CSS Grid Playground

CSS Grid is the most powerful layout system on the web, capable of building everything from a simple two-column card grid to a full holy-grail page scaffold with named areas. But the mental model of tracks, fr units, minmax, and grid-template-areas is abstract until you can see the grid lines materialize. The CSS Grid Playground renders a live grid that updates as you define columns and rows, set gaps, and assign named areas. Add items by line number or area name and watch them snap into position. Resize the playground container to test how repeat(auto-fit) collapses and expands. The exported CSS includes the minimum grid-template and gap declarations needed to reproduce the layout, ready for production.

Why use CSS Grid Playground

Template Builder

Define grid-template-columns and grid-template-rows visually using typed track values. The playground parses fr, px, %, auto, minmax(), and repeat() and renders the resulting grid lines immediately, bridging the gap between syntax and visual layout.

Named Areas

Type a grid-template-areas map using quoted row strings and the playground renders each named region as a distinct colored cell. This visual ASCII-art representation is the most intuitive way to design complex page scaffolds before writing placement rules.

Track Sizing

Mix fr units with fixed widths, percentages, and minmax() on individual tracks without the values conflicting. The playground resolves fractional units against the available space and shows you exactly how wide each track renders at the current container width.

Auto-Fit

Type repeat(auto-fit, minmax(280px, 1fr)) in the columns field and resize the playground container to see auto-fit collapse tracks and reflow cards responsively. This single technique eliminates most responsive grid media queries.

Gap Control

Separate sliders for row-gap and column-gap let you set spacing independently. See the visual difference between tight grids with no gap, card grids with generous spacing, and gallery-style grids with different horizontal and vertical gutters.

Copy Full CSS

The exported CSS includes the grid container rule with all track definitions, gap, and any template-areas string, plus individual item placement rules where lines or areas were explicitly assigned. Non-default auto placements are omitted for cleaner output.

How to use CSS Grid Playground

  1. Define column tracks using fr units, fixed px, auto, or minmax() in the columns input
  2. Define row tracks as needed, or leave them implicit for auto row sizing
  3. Set row-gap and column-gap with the sliders
  4. Optionally enter grid-template-areas as quoted rows to create a named-area layout
  5. Place items by dragging them to grid cells or entering grid-column and grid-row values
  6. Click Copy CSS to capture the grid-template and placement declarations

When to use CSS Grid Playground

  • When building a holy-grail page layout with header, sidebar, main, and footer using grid-template-areas
  • When creating a responsive card grid that collapses from three columns to one without media queries
  • When designing a complex editorial layout where items span multiple columns or rows
  • When learning how fr units distribute space relative to fixed-width tracks in the same template
  • When debugging a grid layout where items are not landing in the expected cells
  • When setting up a design-system layout grid with consistent gutters and column counts

Examples

Three-column equal grid

Input: columns: repeat(3, 1fr), gap: 24px

Output: .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

Responsive card grid

Input: columns: repeat(auto-fit, minmax(280px, 1fr)), gap: 16px

Output: .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

Holy grail layout

Input: columns: 200px 1fr 200px, areas: header / nav main aside / footer

Output: .layout { display: grid; grid-template-columns: 200px 1fr 200px; grid-template-areas: 'header header header' 'nav main aside' 'footer footer footer'; }

Tips

  • repeat(auto-fit, minmax(280px, 1fr)) is the most versatile responsive grid template — it handles 1 to N columns without a single media query
  • fr units distribute remaining free space after gaps and fixed tracks are subtracted — they are more predictable than percent when mixing with gaps
  • grid-template-areas reads like ASCII art — keep the rows aligned in your source code so the map is visually clear when you review it later
  • auto-fit collapses empty tracks; auto-fill preserves them — use auto-fit when you want items to stretch and fill the row
  • Use grid-column: span 2 on individual items alongside auto-fit for featured cards that take double width in a standard card grid

Frequently Asked Questions

What is the difference between fr and percent in grid?▾
Percent tracks are calculated from the grid container's total size, including gaps. fr units distribute only the remaining free space after fixed tracks and gaps are subtracted. In most cases fr is more predictable since it avoids overflow caused by combining percent tracks with gaps.
When should I use auto-fit vs auto-fill?▾
Both keywords create as many tracks as will fit at the minimum size. auto-fit collapses empty tracks to zero width, so remaining items stretch to fill the container. auto-fill keeps empty tracks at their minimum size, leaving space. For growing items, auto-fit is usually what you want.
How do named grid areas work?▾
grid-template-areas assigns string names to rectangular regions. A cell name repeated in adjacent columns/rows spans those cells. Items placed with grid-area: name automatically occupy the named region. The string pattern serves as a visual map of the layout.
What is the difference between grid and flexbox?▾
Grid is two-dimensional — you define both rows and columns and place items across both axes simultaneously. Flexbox is one-dimensional — items flow along one axis. Use grid for page scaffolds and component layouts requiring both-axis alignment; use flexbox for toolbars, navigation rows, and single-axis arrangements.
Can grid items overlap each other?▾
Yes. Grid items can be placed in the same cell or overlapping cell ranges using grid-column and grid-row. z-index controls visual stacking order for overlapping items. This makes grid useful for layered UI like image overlays and stacked hero content.
How do I make a grid responsive without media queries?▾
Use repeat(auto-fit, minmax(minimum, 1fr)) for grid-template-columns. The browser calculates how many tracks fit at the minimum size and reflows automatically as the container resizes. This one declaration handles most responsive card grid scenarios without breakpoints.
What does minmax(280px, 1fr) mean?▾
minmax() defines a range for a track size. 280px is the minimum size — the track will never shrink below this. 1fr is the maximum — when there is extra space, the track grows proportionally with other fr tracks. This pattern creates responsive tracks that flex above their minimum.
Why are my grid items not in the cells I expected?▾
CSS grid places items in auto-flow order (left-to-right, top-to-bottom) by default. If explicit placements using grid-column or grid-row conflict or leave gaps, auto-placed items fill in differently than expected. Use grid-auto-flow: dense to fill holes, or explicitly place all items.

Explore the category

CSS Transform Playground Combine translate, rotate, scale, and skew with live matrix feedback and CSS export. Flexbox Playground Tune flex-direction, alignment, gap, and item counts while copying container CSS. CSS Filter Playground Stack blur, color, and tonal CSS filters with sliders and copy-ready filter declarations. Box Shadow Generator Tune blur, spread, offsets, color, and inset shadows with an instant CSS preview. Text Shadow Generator Stack up to three readable text shadows and export CSS for headings and hero type. Border Radius Generator Shape corners with unified or per-corner sliders and export shorthand border-radius CSS.
Flexbox vs Grid: When to Use Which CSS Layout System Flexbox and Grid are not competing technologies — they solve different layout problems. Knowing which to reach for makes your CSS cleaner an Apr 2026 · 9 min CSS Specificity: The Complete Guide to the Cascade and Inheritance CSS specificity is the invisible rule that decides which style wins when two selectors target the same element. Understanding it lets you de Apr 2026 · 9 min CSS Custom Properties (Variables) Explained with Real Examples CSS custom properties are far more powerful than SASS variables — they are live, inheritable, and can be changed with JavaScript at runtime. Apr 2026 · 8 min

Glossary

Grid Track
A single row or column in a CSS grid, defined by grid-template-columns or grid-template-rows. Tracks can be fixed, fractional (fr), or content-driven (auto).
Fractional Unit
The fr unit in CSS grid represents a fraction of the available free space in the grid container after all fixed-size tracks and gaps are accounted for.
Grid Area
A named rectangular region in a grid defined by grid-template-areas. Items assigned grid-area: name occupy the entire named region regardless of its cell count.
minmax
A CSS grid function that sets a minimum and maximum size for a grid track. The track will not shrink below the minimum or grow beyond the maximum, enabling flexible yet bounded layouts.
auto-fit
A CSS grid repeat keyword that creates as many tracks as fit at the specified minimum size and collapses empty tracks to zero, causing existing items to stretch to fill remaining space.
Implicit Grid
Grid rows or columns created automatically when items are placed outside the explicitly defined tracks. Controlled by grid-auto-rows and grid-auto-columns properties.