CSS Grid Generator

A grid is defined by its tracks: grid-template-columns and grid-template-rows each take a list of sizes. A length or a percentage is fixed, auto fits the content, and the fr unit shares the space that is left after the other tracks are sized. minmax(min, max) sets a range, and minmax(0, 1fr) is the usual fix for a column that is pushed wider than its share by long content, because a plain 1fr is really minmax(auto, 1fr). Repeated tracks are written with repeat(4, 1fr).

Items are placed on the numbered lines between the tracks. grid-area: 2 / 1 / 3 / 4 reads row-start / column-start / row-end / column-end, so that item sits in the second row and spans columns 1 to 3: the end lines are exclusive. The same layout can be written as a picture with grid-template-areas, where each string is a row, each word is a cell, and a dot leaves a cell empty. Named areas must be rectangles and cannot overlap, and every row must have the same number of cells.

justify-items and align-items position each item inside its area, horizontally and vertically; the default stretch makes the item fill it. justify-content and align-content move the tracks inside the container when they do not fill it, which only happens with fixed or content-sized tracks. gap is written as row gap followed by column gap. For responsive card grids without media queries, use repeat(auto-fit, minmax(220px, 1fr)) as the column template.