CSS Grid Playground
Visual CSS Grid builder: rows, columns, gap, named areas. Copy the CSS.
Live Preview
1
2
3
4
5
6
CSS Output
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 1rem;
}About CSS Grid Playground
Set the number of rows and columns, adjust track sizes with units like fr, px, or auto, and choose a gap to space cells apart. You can also name grid areas and assign them to a template, then watch the layout redraw in the preview as you change each setting.
The builder generates the full set of grid properties, including grid-template-columns, grid-template-rows, and grid-template-areas, ready to copy into your stylesheet. It is a quick way to prototype a page shell or a card layout and check how fractional units share leftover space before writing the CSS by hand.
Frequently asked questions
- What does the fr unit mean?
- An fr unit represents one share of the free space remaining in the grid after fixed-size tracks are placed.
- How do named grid areas work?
- You label regions in grid-template-areas, then place items into them with the grid-area property using those names.
- Does this generate Flexbox or Grid code?
- It outputs CSS Grid properties only; use a Flexbox tool when you need one-dimensional row or column layouts.