How to Use CSS Grid Generator

About this tool

Build a CSS grid with configurable tracks, gaps and a spanning first item.

How to use CSS Grid Generator

1. Set Columns, Rows, Column gap and Row gap.
2. Choose Column size and optionally let the first item span two columns.
3. Copy the generated CSS and test it with real content.

Worked example

Choose responsive auto-fill tracks for cards that should wrap as the container width changes.

What is minmax(0, 1fr) for?

It lets equal tracks shrink below their content’s automatic minimum. Long content may still need wrapping rules.

Does the preview set my website breakpoints?

No. Apply and test the output in your own container; add responsive rules if the layout needs them.

Put this guide into practice

• CSS Grid Generator — Build CSS grid layouts with columns, rows and gaps.