Utilsha.

CSS Grid Playground

Generate a CSS grid with configurable columns, rows, and gaps with an instant preview.

1
2
3
4
5
6

Generated CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  column-gap: 16px;
  row-gap: 16px;
  align-items: stretch;
  justify-items: stretch;
}

Grid versus Flexbox

CSS Grid organizes rows and columns together; Flexbox is often better for one dimension. This playground creates a regular grid without complex areas.

repeat(), fr, and gap

repeat(3, 1fr) creates three equal columns. The fr unit shares available space and gap controls spacing between cells.

Explore all web development tools

Related tools