CSS grid generator

CSS Grid is the layout system for two-dimensional designs: page shells, dashboards, galleries and forms where both rows and columns need to line up. This generator lets you define the number and size of columns and rows and the gap between them, preview the grid and copy the container CSS.

How to use it

1. Set the number of columns and rows.
2. Choose track sizes such as 1fr, fixed pixels or auto.
3. Set the column and row gap.
4. Copy the generated CSS.

Example output

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 16px;
}

Key concepts

• fr unit: a fraction of the free space. 1fr 2fr gives the second column twice the width of the first.
• repeat(): shorthand, so repeat(4, 1fr) equals four equal columns.
• minmax(): sets a size range, as in minmax(200px, 1fr).
• gap: spacing between tracks, without margins on items.

The responsive grid one-liner

grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); creates as many columns as fit, each at least 220 px wide, with no media queries. Use auto-fit instead of auto-fill if you want the items to stretch when there are fewer of them than columns.

Placing items

Items can span tracks with grid-column: span 2 or be placed precisely with grid-column: 1 / 3. Named areas with grid-template-areas make page layouts very readable, for example a header, sidebar, main and footer.