CSS Grid Playground

Configure grid properties visually. Preview the layout and copy the CSS.

Columns

e.g. 1fr 1fr, 200px 1fr, repeat(3, 1fr)

Rows

e.g. auto, 100px 200px, repeat(2, 1fr)

Gap

e.g. 12px, 10px 20px, 1rem

Justify Items

Align Items

Justify Content

Align Content

Auto Flow

Auto Rows

Height for implicit rows

6 items

Generated CSS

Presets