How to Build a CSS Grid Layout in Minutes
CSS Grid turns a plain container into rows and columns with a few lines of code. This guide explains columns, rows and gaps so you can lay out a page without extra wrappers.
What is the CSS Grid Generator?
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.
How to use it
- 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.
Worked example
With 3 columns, 2 rows and a 16px gap, the result is a .grid rule with display grid, grid-template-columns set to repeat(3, 1fr), grid-template-rows set to repeat(2, 1fr), and a gap of 16px.
How many columns should a grid have?
It depends on the content. Three or four columns suit card layouts, two columns suit text-and-image sections, and a single column keeps narrow reading layouts tidy. Start with the sample values, then adjust until the layout feels balanced.
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.