Skip to main content

CSS Grid Playground

Build CSS grid layouts visually — set container properties and copy the generated CSS.

Runs in your browser — no data leaves your device

1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.item {
  padding: 1rem;
}