CSS Grid Generator

About the CSS Grid Generator

Generates ready-to-use CSS for a grid container from the number of columns, rows and the gap between cells.

How to use

Enter columns, rows and gap, then click Generate.

Worked example

3 columns, 2 rows, 16px gap → a clean responsive grid template.

How to use this calculator

1. Choose the number of columns and rows you want in the grid.
2. Set the gap size to control spacing between items.
3. Generate the CSS code and copy it into your stylesheet.
4. Paste your grid items into the container and test the layout in a browser.

Step by step method

1. Start with the structure you need, such as 3 columns and 2 rows.
2. Decide whether tracks should share space evenly with fr units or size automatically.
3. Enter the gap value so the tool can add spacing between grid cells.
4. Generate the CSS and apply it to a container with child elements.

Worked example

You want a simple product gallery with 3 equal columns, 2 rows, and a 16 pixel gap between items.

1. Set columns to 3, rows to 2, and gap to 16px.
2. Use equal-width tracks, which means the column code can be written as \(repeat(3, 1fr)\) and the row code as \(repeat(2, 1fr)\).
3. The tool generates a grid container style with those values and the 16px spacing.

Tips and common mistakes

• Use fr units when you want columns or rows to share the available space evenly.
• Use auto-fit or auto-fill when you want the grid to respond to container width.
• Remember that gap controls space between items, not the outer margin of the grid.
• If the layout looks too crowded, increase the gap or reduce the number of columns.

Frequently asked questions