CSS Grid Generator

Each box under Columns and Rows is one track. The browser sizes fixed tracks first (px, rem, %), then content-sized ones (auto, min-content, max-content), and only then splits whatever space is left between the fr tracks. That order is why mixing them works: 250px 1fr always gives the sidebar exactly 250px and the content everything else.

When every track in a list is the same, the export shortens it: four 1fr columns become repeat(4, 1fr). The two forms are identical to the browser.

Load the Holy Grail layout and drag the preview box to about 1,000px wide. Its columns are 200px minmax(0, 1fr) 200px with a 16px gap. The two gaps sit between three columns, so:

1000 − 200 − 200 − (2 × 16) = 568px for the middle column

The line under the preview reads the sizes back from the browser, so you can check this against the real figure as you resize. Now try the same layout with percentages, 20% 60% 20%. The columns add up to 100% of 1,000px, then the browser adds the 32px of gaps on top, and the grid is 1,032px wide in a 1,000px box: a horizontal scrollbar. With fr, the gaps come out first and the columns share what is left, so the total always fits.

Rows work the same way only if the container has a height to share. Holy Grail turns on min-height: 100vh, so its middle 1fr row gets the screen height minus the header, footer and gaps. Without that line, a 1fr row just shrinks to fit its content.

Grid lines are numbered from 1 at the start edge, so a three-column grid has lines 1 to 4. grid-column: 1 / 4 means "from line 1 to line 4", the full width. Named areas describe the same placement as a picture instead:

grid-template-areas:
  "header header  header"
  "nav    content sidebar"
  "footer footer  footer";

Each quoted string is one row and each word is one cell. Repeating a name across cells merges them, and a . leaves a cell empty. The generator pads the names so the columns line up, which the browser ignores but people reading the code will not.

Area names are custom identifiers, so they cannot start with a digit and cannot be auto, span or a CSS-wide keyword such as inherit. The name field rejects those.

A misspelled name does not raise an error, and it does not put the item back in the normal flow either. If an item says grid-area: site-header and no area has that name, the browser looks for lines called site-header-start, finds none, and the specification says to treat every implicit line as having that name. So the item lands in a new row and column just outside the grid, usually bottom-right, and the layout grows an extra track. If one block suddenly appears in a corner after a rename, compare the class's grid-area with the template first.

The tracks you set do not shrink below their fixed sizes: a 200px + 1fr + 200px layout with 16px gaps needs more than 432px before the middle column has any room. Tick "One column below" and the export becomes mobile-first: the container is a plain one-column grid by default, and the full template and item placement only apply inside @media (min-width: …). On a phone the items stack in source order, which is why the HTML is always written top to bottom, left to right.

For a run of cards, where the number of columns should depend on the space, skip the media query entirely. This is the one-line pattern, with a live demo:

auto-fill creates as many columns as fit at the minimum width, even when there are not enough cards to fill them. With three cards in a row wide enough for five, the cards keep their width and two empty tracks sit at the end. auto-fit collapses those empty tracks to zero, so the same three cards stretch across the full row. Set the sample to 2 cards and switch between the two to see it; once the row is full, they behave the same.

min(240px, 100%) handles the other edge: on a screen narrower than 240px, a plain minmax(240px, 1fr) still insists on 240px and the page scrolls sideways. Taking the smaller of the two lets the single column shrink with the screen.

A Pinterest-style layout, where each tile is as tall as its content and the next tile tucks under the shortest column, is not something a normal grid does: every item in a row shares the row's height. The CSS Working Group's answer is a new display type, display: grid-lanes, in the CSS Grid Layout Level 3 draft. It replaced the earlier grid-template-rows: masonry proposal. Safari 26.4 ships it; Chrome, Edge and Firefox have experimental versions behind flags at the time of writing, so treat it as an enhancement over a normal grid:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

@supports (display: grid-lanes) {
  .gallery { display: grid-lanes; }
}

The older workaround sets tiny rows, such as grid-auto-rows: 10px, and gives each tile a row span. It works everywhere, but the gap catches people out because it sits between every pair of rows the tile crosses. A tile spanning 15 rows with a 16px row gap is not 150px tall:

15 × 10px + 14 × 16px = 150 + 224 = 374px

The usual fix is row-gap: 0 with 1px rows, spacing the tiles with margins instead, so a tile's span equals its height in pixels. A few lines of JavaScript then measure each tile's content and set grid-row: span … to match.

Most pages use both: Grid for the outer layout this generator builds, and Flexbox inside each area for the content that runs in a line.