CSS Grid Playground
Experiment with every CSS Grid property and see the effect live. 100% client-side.
Layout presets
1
2
3
4
5
6
Click an item to edit its column/row spans.
Container CSS
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 12px;
justify-items: stretch;
align-items: stretch;
justify-content: start;
align-content: start;
}Item "1" CSS
.item-1 {
/* single cell — no span */
}Container properties
Items (6/12)
Item "1"
Tip: increase col or row span to make an item stretch across multiple cells.
Example: grid-column: span 2
📖 Grid unit reference
fr (fraction)
1fr 1fr — two equal columns. 1fr 2fr — second is twice as wide.repeat()
repeat(3, 1fr) — three equal columns.minmax()
minmax(200px, 1fr) — at least 200px, then grow.auto-fit
repeat(auto-fit, minmax(200px, 1fr)) — responsive grid, no media queries.🔒 100% private: All experimentation happens in your browser. Your layout is never sent to any server.
About CSS Grid Playground
CSS Grid is a two-dimensional layout system that arranges items into rows AND columns simultaneously — unlike Flexbox, which works in one dimension. Grid is ideal for page layouts, dashboards, card galleries, and any design where content flows in both directions. The container defines the grid with grid-template-columns and grid-template-rows; gap controls spacing; justify-items and align-items align content within cells. Individual items can span multiple cells with grid-column and grid-row, or be placed explicitly. Learning Grid is much easier with a visual playground — change a value and see the immediate effect. This tool gives you every property, presets, and generated CSS.
How It Works
- Set the grid container properties: columns, rows, gap, alignment.
- Adjust the container height to see the grid at different scales.
- For each grid item, set grid-column and grid-row spans.
- See the layout update live.
- Copy the generated CSS for the container and selected item.
✨ Key Features
- ✓grid-template-columns with preset buttons
- ✓grid-template-rows with preset buttons
- ✓gap, justify-items, align-items
- ✓justify-content, align-content
- ✓Per-item column/row spans
- ✓Adjustable container height
- ✓6 layout presets (Holy Grail, dashboard, gallery, sidebar, responsive, masonry)
- ✓Generated container CSS
- ✓Generated item CSS
- ✓Click any item to edit
- ✓1–12 configurable grid items
- ✓100% client-side — no data sent to any server
🎯 Common Use Cases
- →Learning CSS Grid by experimenting
- →Prototyping page layouts
- →Designing dashboards and admin panels
- →Creating card galleries with consistent sizing
- →Building the "Holy Grail" layout
- →Understanding fr units vs px vs %
- →Generating CSS for a specific grid layout
- →Comparing Grid and Flexbox behaviors
💡 Advanced Tips & Pro Insights
- ▸The "fr" unit means a fraction of the free space. "grid-template-columns: 1fr 2fr" gives the second column twice the width of the first.
- ▸Use "repeat(3, 1fr)" to create 3 equal columns. Combine with "auto-fit" and "minmax" for responsive grids: "repeat(auto-fit, minmax(200px, 1fr))".
- ▸gap is the modern shorthand for row-gap + column-gap. No more margin hacks.
- ▸justify-items aligns items horizontally WITHIN their grid cells. align-items aligns them vertically. These are different from justify-content, which aligns the entire grid within its container.
- ▸align-content only takes effect when the grid is smaller than its container (and items do not fill it).
- ▸Items can span multiple cells with "grid-column: span 2" or explicitly with "grid-column: 1 / 3".
- ▸Grid and Flexbox coexist well: use Grid for the outer 2D layout, Flexbox for alignment within individual cells.
Frequently Asked Questions
Is this Grid playground free?▾
Yes, this CSS Grid playground is completely free with no signup, email, or usage limits.
Is my data safe?▾
Yes, 100% safe. All experimentation happens in your browser. Nothing is uploaded to any server.
What is CSS Grid?▾
CSS Grid is a two-dimensional layout system for arranging items in rows and columns. Unlike Flexbox (which is one-dimensional), Grid can control both axes simultaneously.
What is the difference between Grid and Flexbox?▾
Flexbox is one-dimensional (a row OR a column). Grid is two-dimensional (rows AND columns together). Use Flexbox for rows of items and simple alignment. Use Grid for page layouts, dashboards, and card galleries.
What does "1fr" mean?▾
"fr" is a fraction unit. "1fr" means "one share of the available space". If you have three columns with "1fr 1fr 1fr", they share the space equally. "1fr 2fr" gives the second column twice as much space.
How do I make a responsive grid?▾
Use: "grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))". This creates as many columns as will fit, each at least 200px wide, all equal width. Perfect for card galleries.
How do I make an item span multiple columns?▾
Use "grid-column: span 2" (spans 2 columns) or explicitly "grid-column: 1 / 3" (from line 1 to line 3). In this tool, use the col/row span sliders on the selected item.
Should I use Grid or Flexbox for cards?▾
For a grid of equally-sized cards, use Grid with "repeat(auto-fit, minmax(250px, 1fr))". For a single row of cards where content flows differently, Flexbox works well.