CSS Grid Generator

Build CSS grid layouts visually. Configure columns, rows, gap, and per-item placement. Copy production-ready CSS.

Grid Container

Columns

Rows

Gap

Auto Flow

Click an item to configure its grid placement properties

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

About CSS Grid

CSS Grid is a two-dimensional layout system that handles both columns and rows simultaneously, unlike flexbox which is one-dimensional.

grid-template-columns / rows define the track sizes. 1fr 1fr 1fr creates three equal columns. repeat(3, 1fr) is equivalent.

fr is a fractional unit that distributes available space. 1fr 2fr gives the second column twice the space.

grid-column / grid-row on items control placement. span 2 makes an item stretch across two tracks.

gap adds consistent spacing between grid tracks. You can set row-gap and column-gap independently.

auto-fill / auto-fit with minmax() create responsive grids without media queries.