CSS Grid Generator

Define columns and rows, set the gaps and alignment, and copy a ready-to-use grid rule.

grid-template-columns

grid-template-rows

column-gap (px)

row-gap (px)

justify-items

align-items

Preview

1

2

3

4

5

6

CSS

How it works

Columns and rows accept any valid track list, such as 200px 1fr 1fr or repeat(3, minmax(0, 1fr)).
Gaps, justify-items and align-items are included so the CSS is complete.
A six-cell preview shows exactly how the tracks behave before you paste the rule into your stylesheet.