gizmobench

CSS Grid Generator

Type the column and row tracks, set the two gaps, place items by grid line, and the preview above the code is the grid itself rather than a picture of one. Two things separate this from the generators that hold this search. The first is that the CSS comes with the HTML it is keyed to: every placed item has its own rule, and every rule matches a class in the markup, so pasting both gives you the arrangement you were looking at instead of a bare track list with nothing to put in it. The second is what happens when two items land on the same cell. Most generators let the browser quietly stack them; this one outlines the pair in the preview and names it underneath, because overlapping grid items are valid CSS and worth seeing rather than an error worth hiding. Track sizes are checked as you type, so 1fr, 240px, 25%, auto, min-content, max-content and minmax(160px, 1fr) are accepted and anything that would not work is named by its position.

Tracks, gaps and items3 items

One track per space, up to 24 each way. Sizes: 1fr, 240px, 25%, auto, min-content, max-content, minmax(160px, 1fr).

Items, in grid lines
Item 1
Item 2
Item 3
Preview3 by 2
Item 1column 1 / 4, row 1 / 2
Item 2column 1 / 2, row 2 / 3
Item 3column 2 / 4, row 2 / 3
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}

.grid__item-1 {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
}

.grid__item-2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.grid__item-3 {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}
Columns
3
Rows
2
Items
3
Overlaps
0

A 3 column by 2 row grid, 16px between the columns and 16px between the rows, holding 3 items. No two items overlap. The CSS and the HTML below are the rules this preview is drawn from, so pasting both reproduces this arrangement.

  • Sidebar pageA fixed sidebar, a fluid main column, and a header and footer across both
    2 columns, 3 rows, 4 items
  • Three card rowThree equal columns with a wider gap, each card in one cell
    3 columns, 1 row, 3 items
  • Badge over a heroA badge placed on top of a full width hero, which is an overlap on purpose
    4 columns, 1 row, 2 items, 1 overlapping pair

The class names in the CSS are the ones in the HTML, so the two paste together and the layout comes out the same. Up to 24 tracks each way and 50 items, and the tracks, gaps and placements are kept in this browser alone. Start over, above the tool, forgets them.

Accuracy. The CSS and the HTML shown are the ones the preview is rendered from, so pasting both reproduces what you see. Overlapping items are reported rather than refused, because overlapping grid items are valid CSS and sometimes the point. The preview adds a tint and a label to each cell so you can tell them apart on the dark background; everything that positions them is in the rule named .grid and the one rule per item beside it.

Common questions

How do I make a CSS grid layout?
Type the column tracks in the Columns field, one size per space, and the row tracks in the Rows field. Three equal columns is 1fr 1fr 1fr; a fixed sidebar beside a fluid column is 200px 1fr. Set the column and row gaps, then place each item by its grid lines: a 3 column grid has 4 column lines, so an item across the whole width runs from line 1 to line 4. The preview updates as you type and the CSS and HTML under it are ready to copy.
Why does the generator give me HTML as well as CSS?
Because a grid rule on its own does not reproduce anything. The container rule is written as .grid, each placed item gets its own rule keyed to a class such as .grid__item-2, and the HTML block carries a div with each of those classes in the same order. Paste the CSS into your stylesheet and the HTML into your page and the layout comes out the way the preview showed it. Rename the classes afterwards if your project uses its own naming.
What track sizes can I use?
A number with fr, px or % (1fr, 240px, 25%), the intrinsic keywords auto, min-content and max-content, and minmax(a, b) with a minimum and a maximum, for example minmax(160px, 1fr). A size outside that set is refused by its position, so Column 3 is 10em tells you which track to fix rather than writing a rule that silently does nothing. Gaps take 0 or a number with px, rem, em or %.
Two of my items are on top of each other. Is that an error?
No, and that is why it is reported rather than refused. Grid items are allowed to share cells: the browser paints the one written later in the HTML on top, which is how a badge sits over a hero image or a card breaks out of its column. The preview outlines the pair with a dashed edge and the line underneath names it, so an overlap you meant stays and an overlap you did not mean is visible instead of being discovered later in a browser.
How big a grid can it build?
Up to 24 column tracks, 24 row tracks and 50 placed items. Past that the preview stops being readable and the emitted rule stops being something anyone would paste, so the request is refused with the count rather than trimmed down without telling you. Grid lines outside the grid are refused the same way: an item that ends at column line 9 in a 3 column grid is told that grid has lines 1 to 4.
What are grid lines, and why do items start at 1?
The lines are the edges between tracks, not the tracks themselves, and CSS numbers them from 1. A grid with 3 columns therefore has 4 column lines, and grid-column: 1 / 4 spans all three. That off-by-one is the usual source of confusion with grid placement, which is why every cell in the preview is labelled with the column and row lines it is placed on, and why the tool refuses line 0 with an explanation instead of guessing what you meant.
Is anything uploaded?
No. The grid is built in your browser, so nothing is sent anywhere and there is no account. The tracks, the gaps and the item placements are remembered in this browser alone so they are still there when you come back, and the Start over button above the tool forgets them.

The CSS and the HTML shown are the ones the preview is rendered from, so pasting both reproduces what you see. Overlapping items are reported rather than refused, because overlapping grid items are valid CSS and sometimes the point.