Grid

grid

Shorthand that sets the whole grid in one declaration: either a grid-template value, or an explicit template in one axis with auto-flow tracks in the other. Any longhand it does not set is reset to its initial value.

grid: auto-flow / repeat(3, 1fr);

grid-template

Shorthand for grid-template-rows, grid-template-columns and grid-template-areas. Give rows and columns separated by a slash, or write the area strings with each row's size after its string and the column sizes after the slash.

grid-template:
  "head head" auto
  "side main" 1fr
  / 12rem 1fr;

grid-template-columns, grid-template-rows

The explicit grid's track sizes in one axis, as a space-separated list, optionally with line names in square brackets between them ([full-start] 1fr [content-start]). Tracks can be lengths, percentages, fr units of free space, auto, min-content, max-content, minmax() or fit-content(), and repeat() repeats a run of them.

An <auto-track-list> contains one repeat(auto-fill, …) or repeat(auto-fit, …), which repeats as many times as fit; auto-fit then collapses the empty repeated tracks. subgrid makes a nested grid use its parent's tracks in that axis instead of defining its own.

grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));

grid-template-areas

Names areas of the grid with strings, one string per row and one name per cell. Repeating a name across adjacent cells makes a larger area, which must be a rectangle; a . marks an unnamed cell. Items are then placed by name with grid-area.

Each named area also creates line names: an area called main gives lines main-start and main-end in both axes.

grid-auto-columns, grid-auto-rows

The size of tracks the grid creates by itself, when items are placed beyond the explicit template or more items arrive than it has cells. A list of sizes is used in turn and repeats.

grid-auto-rows: minmax(8rem, auto);

grid-auto-flow

How items without an explicit position are placed: filling each row in turn (row) or each column (column). dense lets later items backfill holes left earlier, which can put items out of source order.

grid-area

Shorthand for all four placement longhands, in the order row-start / column-start / row-end / column-end. A single name places the item in the matching area from grid-template-areas.

main { grid-area: main; }
.banner { grid-area: 1 / 1 / 2 / -1; }  /* first row, every column */

grid-row, grid-column

Shorthands for the start and end lines in one axis, separated by a slash. With one value the end is auto, which spans a single track, unless the value is a name, which sets both ends to that name.

grid-column: 2 / span 3;

grid-row-start, grid-row-end, grid-column-start, grid-column-end

The grid line where an item starts or ends in one axis. An item with auto on both ends of an axis is placed by the auto-placement algorithm.

justify-items

Aligns every item within its grid area along the inline axis, by setting the default that each child's justify-self: auto picks up. Flex containers ignore it.

On its own, legacy computes to normal. If the parent's value is legacy with left, right or center, the element takes that value instead, so the alignment passes down the tree.

justify-self

Aligns one item within its grid area along the inline axis, overriding justify-items. auto uses the parent's justify-items. It does not apply to flex items; use an auto margin there.

place-content

Shorthand for align-content and justify-content: where the grid's tracks, or a flex container's lines and items, sit within the container.

place-items

Shorthand for align-items and justify-items: the default alignment of every item in its area.

.stage { display: grid; place-items: center; }

place-self

Shorthand for align-self and justify-self: the alignment of one item in its area.