CSS Grid Generator

Create responsive CSS Grid layouts visually. Customize columns, rows, and gaps, then copy the generated code.

Columns (3)

Col 1

Col 2

Col 3

Rows (2)

Row 1

Row 2

Gap & Container

Column Gap (px)

Row Gap (px)

Container Width

Container Height

Grid Preview(Click cells to set span)

3 columns x 2 rows = 6 cells

CSS Grid Quick Tips

frFractional unit - divides available space proportionally
pxFixed pixel width - does not resize
%Percentage of container width
autoSizes based on content
minmaxSets minimum and maximum size (e.g., minmax(100px, 1fr))
Click any cell in the preview to merge/span across columns or rows

Common Layout Presets