CSS Grid Playground

Visually explore CSS Grid properties. Configure columns, rows, gaps, and item placement — see changes live and copy ready-to-use CSS.

Container
grid-template-columnsDefines the column track sizes. Use fr units for flexible tracks, fixed sizes, or repeat().
grid-template-rowsDefines the row track sizes. Use auto to let rows size to their content.
gap8px
column-gap override
px
row-gap override
px
justify-itemsAligns grid items along the inline (row) axis within their cells.
align-itemsAligns grid items along the block (column) axis within their cells.
justify-contentDistributes space along the inline axis when the grid is smaller than the container.
align-contentDistributes space along the block axis when the grid is smaller than the container.
Items
Number of items6
Live PreviewClick an item to set its placement
1
2
3
4
5
6
CSS Output
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}