Back to Tools

CSS Grid Generator

Build complex grid structures visually and accurately

Grid Master

Grid Structure

Cols: 3

Rows: 3

Item Placement (Item #-)

Col Span

Row Span

Area Name (Optional)

Gaps:

Live Grid Visualization

Sketch a grid layout, then copy the rules

CSS Grid is powerful, but syntax like repeat(), fr units and span values is easy to mix up. This generator lets you set the shape of the grid with sliders, click cells to stretch them across several tracks, and see the layout instantly. Once it matches your plan, you copy the CSS instead of typing it.

Working through the controls

In Grid Structure, drag Cols and Rows from 1 to 12. The preview redraws with that many numbered cells.
Use the two drop-downs beneath them to size the tracks: 1fr shares space equally, while 100px sets a fixed size. One drop-down controls columns and the other controls rows.
Click any numbered cell in the preview to select it. The Item Placement heading shows which one.
Set Col Span and Row Span to make that cell cover more tracks, and optionally type an Area Name such as header.
Use the two Gaps sliders, each from 0 to 50 pixels. The first controls the gap between columns and the second the gap between rows.
Click Generate Grid CSS, then Copy CSS.

The code you receive

The tool writes a .grid-container rule with display grid, grid-template-columns and grid-template-rows using repeat(), and a gap declaration with the row gap first and the column gap second. For each cell you changed, it adds a rule named after its number, for example .item-4, holding grid-column and grid-row span values and, if you typed one, a grid-area name.

Practical scenarios

Planning a page skeleton with a header, sidebar, content and footer.
Making a photo gallery in which a few images span two columns.
Building dashboard tiles of different sizes.
Teaching yourself how fr units and spans behave before touching production code.

What to remember

All columns share one unit and all rows share another; you cannot mix a fixed and a flexible column in the same grid here. Uneven track lists, minmax(), auto-fit and named template areas are not available, so add them by hand if your design needs them. When you make a cell span several tracks, the preview keeps the total number of cells, so later cells may wrap to new rows in ways that differ from your final markup.

Item numbers refer to the order of cells in this preview, and .grid-container and .item-N are placeholder names, so rename them to match your own HTML. Changing any control hides the old code until you click the Generate button again. All calculations are performed in the browser.

Related Articles

CSS Grid Layout: A Beginner-Friendly Guid

Related Tools

Frequently Asked Questions

How do I make one cell bigger than the others?

Click the numbered cell in the preview, then raise Col Span or Row Span. The cell stretches across that many tracks, and the generated CSS includes a rule for it with grid-column or grid-row span values.

What do the two Gaps sliders control?

The first slider sets the column gap and the second sets the row gap, each between 0 and 50 pixels. In the output they appear as a single gap declaration with the row value first.

Can I mix fixed and flexible columns?

No. The Cols unit menu applies one unit to every column, either 1fr or 100px, and the Rows menu does the same for rows. Custom track lists have to be edited manually after copying.

What does the Area Name field do?

If you type a name for a selected cell, the item's rule in the output includes a grid-area declaration with that name. You would still define the matching template areas yourself in your own CSS.

Why did my layout change after I moved a slider?

Adding or removing columns and rows changes how many cells exist and how spanned cells flow. The old code is hidden when you adjust controls, so generate again to get matching CSS.