Skip to main content

CSS Grid Playground

v1.0.1

Interactively configure CSS Grid layouts and export the generated CSS.

Interactively configures CSS Grid layouts — define columns, rows, gaps, and item placement — with a live visual canvas and exportable CSS grid-template declarations.

How to use
  • →Set grid-template-columns and grid-template-rows using the input fields or drag handles.
  • →Click grid cells to assign grid-area spans and placements to items.
  • →Copy the generated CSS into your component stylesheet.
Preview
1
2
3
4
5
6
CSS
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  grid-auto-flow: row;
}