Why use CSS Grid Generator
This CSS grid generator writes the container rule for an even grid: display: grid, grid-template-columns, grid-template-rows and gap, plus justify-items and align-items when you change them. With the starting settings you get grid-template-columns: repeat(3, 1fr), two rows and a 16px gap. Switch Column sizing to a responsive mode and the columns line becomes repeat(auto-fit, minmax(200px, 1fr)), which changes the number of columns as the container resizes with no media queries. Alongside the CSS you get matching HTML with one numbered div per cell. Every item occupies one cell: the tool does not create spanning items, named grid areas or columns of different widths, so those are covered by hand-edits further down.
The four column sizing modes and the CSS each one writes
Output shown for the starting values of 3 columns and a 200px minimum column width.
| Column sizing option | grid-template-columns output | Column count | Use it for |
|---|---|---|---|
| Equal fractions | repeat(3, 1fr) | Fixed at the Columns value | Layouts that always need the same number of equal columns |
| Responsive, auto-fit with minmax() | repeat(auto-fit, minmax(200px, 1fr)) | Changes with container width | Card rows where a few cards should stretch to fill the row |
| Responsive, auto-fill with minmax() | repeat(auto-fill, minmax(200px, 1fr)) | Changes with container width | Galleries and lists where items should keep a steady size however many there are |
| Size to content | repeat(3, auto) | Fixed at the Columns value | Columns sized from what is inside them, such as a row of labels and values. Spare width is shared out between the columns |
In the responsive modes the Columns slider no longer controls the CSS. It only sets how many sample cells appear in the preview and the HTML.
How many columns auto-fit minmax() gives at a given width
columns = floor((container width + gap) / (minimum column width + gap)), and never fewer than 1
The browser fits as many minimum-width columns, with gaps between them, as the container can hold, then shares any leftover width equally because of the 1fr maximum. Each column ends up (container width - gap x (columns - 1)) / columns wide. With a 200px minimum and a 16px gap in a 1024px container: (1024 + 16) / (200 + 16) = 4.8, so 4 columns, each (1024 - 48) / 4 = 244px wide. The width that matters is the grid container's own content width, not the viewport, so padding and sidebars reduce it.
Column counts for repeat(auto-fit, minmax(200px, 1fr)) with a 16px gap
Calculated with the formula above, assuming there are at least as many items as columns.
| Container width | Columns | Width of each column |
|---|---|---|
| 320px | 1 | 320px |
| 480px | 2 | 232px |
| 600px | 2 | 292px |
| 768px | 3 | 245.3px |
| 1024px | 4 | 244px |
| 1200px | 5 | 227.2px |
| 1440px | 6 | 226.7px |
Below 200px of container width a single 200px column overflows. To prevent that, edit the copied rule to minmax(min(200px, 100%), 1fr) so the minimum can never exceed the container.
Grid layouts and the CSS the tool produces for them
Three equal columns, two rows (starting values)
Columns 3, Rows 2, Column gap 16, Row gap 16, Column sizing: Equal fractions
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px; }
The HTML panel contains six divs with the class item, numbered 1 to 6.
Responsive card grid
Column sizing: Responsive, auto-fit with minmax(), Minimum column width 200
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px; }
Photo gallery with steady thumbnail size
Column sizing: Responsive, auto-fill with minmax(), Minimum column width 250, Column gap 24, Row gap 24
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 24px; }
Two columns with centred content and uneven gaps
Columns 2, Rows 3, Column gap 32, Row gap 8, Justify items center, Align items center
.grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, minmax(80px, auto)); gap: 8px 32px; justify-items: center; align-items: center; }
12 column page grid
Columns 12, Rows 1, Column gap 24, Row gap 0
.grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(1, minmax(80px, auto)); gap: 0px 24px; }
What the generated rows line does, and when to replace it
Every output includes grid-template-rows: repeat(n, minmax(80px, auto)), where n is the Rows slider. Each of those rows is at least 80px tall and grows to fit taller content.
That line only describes the rows you counted. If you add more items than columns times rows, the extra items go into new rows the browser creates automatically, and those rows are sized by grid-auto-rows, which defaults to auto. They will be exactly as tall as their content, without the 80px minimum, so the later rows can look shorter than the first ones.
This matters most in the two responsive modes. When the container narrows and six cells reflow from three columns into two or one, the grid needs more rows than the Rows slider declared.
For any grid where the number of items or columns can change, delete the grid-template-rows line and write grid-auto-rows: minmax(80px, auto) in its place. Every row, however many there turn out to be, then follows the same rule. If you do not want a minimum height at all, remove the line entirely and rows will size to their content.
Hand-edits for layouts the tool does not generate
The output is a uniform grid. These one-line changes cover the common next steps.
- Make one item span two columns: add grid-column: span 2 to that item. For two rows, grid-row: span 2.
- Sidebar plus content: replace the columns line with grid-template-columns: 250px 1fr for a fixed sidebar and a flexible main area.
- Unequal fractions: grid-template-columns: 2fr 1fr gives a two-thirds and one-third split.
- Stop long content widening a column: write minmax(0, 1fr) in place of 1fr. A plain 1fr column will not shrink below the width of its longest word or widest image.
- Centre a single item in its cell: add place-self: center to the item, which sets both alignments for that item only.
- Position the whole grid inside a larger container: use justify-content and align-content on the container. These move the tracks, while justify-items and align-items position content inside each cell.
- Style the cells: the copied CSS covers the .grid container only. The tinted boxes in the preview are sample styling, so add your own .item rule.
How to get your result
- 1
Set Columns (1 to 12) and Rows (1 to 8). The preview and the HTML contain columns times rows cells.
- 2
Drag Column gap and Row gap between 0 and 60px.
- 3
Choose a Column sizing mode: equal fractions, responsive auto-fit, responsive auto-fill, or size to content.
- 4
In a responsive mode, set Minimum column width (80 to 400px). This is the narrowest a column may get before the grid drops to fewer columns.
- 5
Change Justify items and Align items if cells should not stretch to fill their tracks.
- 6
Copy the CSS and the HTML panels into your project and replace the numbered divs with your content.