CSS Grid Generator
Build a CSS grid container by setting columns, rows and gap, and copy the ready-to-paste CSS.
Quick answer: enter your details below and click Generate grid CSS — your result appears instantly, right here in your browser. Nothing you enter is uploaded or stored.
C
Developer
Enter your details below.
How to use
- Enter the number of columns and rows you want.
- Set the gap between grid tracks in pixels.
- Click Generate grid CSS and copy the rule into your stylesheet.
About this tool
A grid container lines up child items in rows and columns without extra wrapper markup. Set how many columns and rows you want and the gap between tracks, and this tool writes the container rule for you. Paste the result into your stylesheet and add your own child items inside the container.
Frequently asked questions
What does repeat(3, 1fr) mean?
It creates 3 columns of equal width, each taking one share of the free space in the container.
Do I need to style the child items too?
No. The container rule alone lays the children out in the grid; you only add child styles if you want spanning, alignment or sizing changes.