CSS Grid generator

Build responsive rows, columns and gaps.

Live preview

Preview styling and sample content are not included in your CSS.

CSS output

Example HTML

How to use CSS Grid

Set column and row counts, then select an item to change its span. The generated media query stacks items on small screens. Preview the narrow layout before copying.

The generated selector is an example. Rename it to match your markup. Shapes, shadows, gradients and rounded corners need an element with dimensions or content.