CSS Grid Playground
Free online CSS grid playground and generator. Edit column and row tracks (fr, px, auto, minmax), place items across numbered grid lines, and copy the CSS.
CSS Grid Playground
Free online CSS grid playground and generator. Edit column and row tracks (fr, px, auto, minmax), place items across numbered grid lines, and copy the CSS.
About CSS Grid layout
Build columns and rows visually
A grid container defines its column and row tracks with grid-template-columns and grid-template-rows. Enter values such as 1fr 2fr 120px or minmax(120px, 1fr), adjust the gap and item alignment, and watch the preview update. Start from the holy grail or card wall preset when you want a working layout to modify.
Tracks are spaces; lines are boundaries
Three column tracks create four numbered column lines because every track has a boundary on each side. Therefore grid-column: 1 / 3 starts at line 1, crosses the first two tracks, and stops at line 3. The numbered dots around the preview make this line-based placement visible while you edit.
Place each item and copy the CSS
Select a box to set its grid-column and grid-row start and end lines, then adjust justify-self or align-self for that item. The generated CSS follows every valid change and is ready to copy. This version focuses on explicit tracks and line placement, so it does not accept repeat(), auto-fill, auto-fit, subgrid, or named grid-template-areas.
FAQ
Common questions and answers about this topic.
What can I do with this CSS Grid generator?
You can define column and row tracks, change the gap and alignment, add boxes, place each box between numbered grid lines, preview the layout, and copy the generated container and item CSS. The presets provide a quick starting point for common layouts.
What does grid-column: 1 / 3 mean?
It places the item from column line 1 up to column line 3, so the item spans the two tracks between those lines. The numbers refer to grid lines, not to the number of columns the item should occupy.
What do fr, auto, and minmax() mean in CSS Grid?
fr divides the remaining space into flexible shares; auto sizes a track from its content and available space; minmax(min, max) gives a track a lower and upper size bound. This editor also accepts fixed pixel tracks such as 120px.
When should I use CSS Grid instead of Flexbox?
Use Grid when rows and columns need to work together as a two-dimensional layout, such as a page shell or card matrix. Flexbox is usually simpler for a single row or column. They are complementary, so a grid item can also be a flex container.
Does this playground support repeat(), auto-fit, subgrid, or named grid areas?
Not currently. The track editor accepts explicit fr, px, auto, and minmax() values so the numbered lines remain predictable. repeat(), auto-fill, auto-fit, subgrid, and grid-template-areas are outside this version's scope.