How to use CSS Grid Layout Generator

Choose whether the grid has a fixed number of columns or fits as many as will go at a minimum width.
Set the columns, rows and gap. Add a stacking breakpoint if the grid should change on a narrow screen.
Check the preview, then copy the CSS rule and the matching HTML. The two blocks describe the same grid you see.

Example: CSS Grid Layout Generator

Build a three column grid that becomes one column on a phone.

You add

Column model: Fixed number of columns. Columns: 3. Rows: 2. Gap in pixels: 16. Stack below: 768. Mobile columns: 1.

You get

The CSS block reads: .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); gap: 16px; } @media (max-width: 768px) { .grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } } The preview shows 6 numbered cells in three columns, the summary reads "Generated a grid with 3 equal columns, a 16px gap and 6 cells. Below 768px it uses 1 column.", and the HTML block holds one div per cell.

Supported inputs and limits

Columns and rows run from 1 to 12 each, so a grid holds at most 144 cells. The gap runs from 0 to 64 pixels and the breakpoint from 0 to 2000 pixels, where 0 writes no media query. The minimum column width for the fit-as-many model runs from 80 to 600 pixels. Whole numbers only. The copied CSS sets grid-template-columns, an optional grid-template-rows, the gap and, when you set a breakpoint, one max-width rule with the mobile column count. It does not add cell styling, named areas, or a container query; a grid with named areas needs those class names in your own stylesheet.

Where your input is processed

This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.

Why next to nothing sits on the columns

A grid rule describes tracks, not content. The generator writes columns, rows and the gap, and the HTML shows which element lands in each track. In a real page the cell contents decide the height of each row, so a taller card in one column moves its whole row down. Check the rule with real content before you settle on a fixed row count.

Questions about CSS Grid Layout Generator

When should I use the fit-as-many model?

Use it when the number of columns should follow the available width, such as a card list. Each column is at least the minimum width you set, and the browser fits as many as will go. Use the fixed model when the layout must have a set number of columns.

Why do the preview columns not match my own layout?

The preview box is as wide as the workspace panel and it swaps at the viewport breakpoint you set. A real container can be narrower, carry padding, or hold wider content, so fewer columns may fit there. Paste the rule into your stylesheet and check the element at its real size.

What does the breakpoint actually do?

Below the width you set, the grid switches to the mobile column count with one max-width media query. Set the breakpoint to 0 to leave that rule out and keep one column count at every width.

Does the numbered cell HTML ship with styling?

No. The HTML block is a plain wrapper with one div per cell so you can see the count at a glance. Replace the numbered divs with your own content, and add the cell styling in your stylesheet.

Project manager: Tony Hines · Content updated 1 October 2026 · Report a problem

CSS Grid Layout Generator

Generate grid controls