Grid Layout

CSS Grid auto-places any item you do not position: it walks the items in document order and drops each one into the next empty cell, one item per cell, filling row by row because grid-auto-flow defaults to row.

The explicit grid is the tracks you declare yourself with grid-template-columns, grid-template-rows or grid-template-areas. The implicit grid is the extra rows or columns the browser generates on its own when items need space outside what you declared.

They are grid line numbers, not column numbers. The item starts at column line 1 and ends at column line 3, so it covers the two tracks between them — the first and second columns.

minmax(200px, 1fr) gives a grid column a 200px floor and a flexible ceiling: the track is never narrower than 200px, but it grows beyond that to absorb its share of the container's leftover free space.

justify-items aligns each grid item inside its own column track along the inline axis. justify-content distributes the column tracks themselves inside the grid container, and only does anything when the tracks are narrower than the container.

The auto-placement cursor never moves backwards in the default sparse packing mode. When the wide item does not fit in the columns remaining on the current row, the cursor jumps to the next row and the skipped cells are left empty forever.

The third row is implicit: grid-template-rows declared only two, so the browser created the third to hold the overflow. Implicit tracks default to grid-auto-rows: auto, which sizes to content. Set grid-auto-rows: 100px to fix it.

Each string in grid-template-areas is a row and each token in it is a cell, so the value reads like a picture of the layout. An item is placed by matching grid-area to a name. Every named area must form one solid rectangle and every row must have the same number of cells, or the whole declaration is dropped.

It builds a responsive grid with no media queries: the browser fits as many 200px-minimum columns as the container allows and stretches them to share the leftover space. auto-fit collapses tracks left empty, so few items stretch across the full width; auto-fill keeps those empty tracks, so items stay at their column width.

The fr unit is a share of the leftover free space, computed after fixed tracks, gaps and content minimums are taken out, while a percentage is a share of the container's full content-box width and ignores gaps entirely — which is why percentage columns plus a gap overflow.

A bare 1fr is shorthand for minmax(auto, 1fr), and that auto minimum resolves to the content's minimum size, so a track cannot shrink below the longest unbreakable word. Fix it with minmax(0, 1fr) on the track, or min-width: 0 (or an overflow value other than visible) on the item.

An auto margin absorbs the positive free space in the item's grid area before box alignment runs, so margin-left: auto pushes the item to the inline-end edge of its area and makes justify-self in that axis have no visible effect.

The initial value is normal, which for grid items behaves as stretch. Stretching only happens when the item's size in that axis is auto and neither margin in that axis is auto, so a set height, an auto margin, or any align-self value other than stretch cancels it.

It switches the axis the grid grows along. With the default row value, items fill across the columns and extra items create new implicit rows sized by grid-auto-rows; with column, items fill down the rows and extra items create new implicit columns sized by grid-auto-columns.

grid-area takes row-start / column-start / row-end / column-end — effectively top, left, bottom, right. Margin's four values run clockwise from the top: top, right, bottom, left. The two orders differ, which is why grid-area's is so often written wrong.

Negative grid line numbers count backwards from the end of the explicit grid, so -1 is its last line. The item therefore stretches across every explicit column. Tracks created implicitly beyond the template are not counted, so -1 stops short of them.

2 / span 3 starts at column line 2 and covers three tracks, ending at line 5. span 3 / 6 ends at line 6 and counts three tracks back, starting at line 3. The span is a track count measured from the opposite edge, never a line number.

A subgrid inherits the parent's gutters and its line names on the subgridded axis, in addition to the track sizes. It can override the gutters with its own gap and add extra line names of its own, and the other axis stays fully independent.

subgrid makes a nested grid reuse its parent's tracks across the area the item spans, so its own children align to the parent's grid lines. An independent nested grid defines fresh tracks that align to nothing outside itself.

min-content sizes a column to the narrowest width its content can take when it wraps as hard as possible; max-content sizes it to the content laid out on one line with no wrapping; fit-content(400px) behaves like max-content but is capped at 400px, wrapping beyond that.

Dense packing backfills the holes that spanning items leave, so use it only where item order carries no meaning — decorative or self-describing tiles. The cost is that visual order stops matching DOM order, while reading order and Tab order still follow the DOM.

Declare only the axis you control — usually the columns — and let the rows be implicit, sizing them with grid-auto-rows. Declaring a row count guesses at the data: too few rows and implicit ones appear anyway with a different size, too many and the empty declared rows still occupy space and gaps.

Give the outer grid three row tracks for title, body and footer, make every card span all three with grid-row: span 3, and set grid-template-rows: subgrid on the card. All three cards then share the same row lines, so titles, bodies and footers align across them.

The grid widens: before placing anything, auto-placement expands the implicit grid to fit the largest column span among auto-placed items, so a third column is created and the item spans all three. The span is never clamped to the two explicit columns.

The grid shorthand sets grid-template-rows, grid-template-columns and grid-template-areas plus grid-auto-rows, grid-auto-columns and grid-auto-flow. Any of those six it does not mention are reset to their initial values, including the three implicit-grid longhands the template form cannot express.

Centering splits any overflow evenly on both sides, and overflow past the start edge of a scroll container cannot be scrolled to, so that part is lost. align-content: safe center tells the browser to fall back to start alignment whenever the tracks overflow, keeping everything reachable.

Every named area generates four lines: for main, the names main-start and main-end on both the row and column axes. An item can target them directly, so grid-column: main-start / main-end works — and grid-area: main is simply shorthand for using all four.

Ship a layout that is already acceptable without subgrid, then upgrade inside @supports (grid-template-columns: subgrid). Subgrid buys alignment refinement, not function, so the fallback should look deliberate rather than broken, and the upgrade should add rules instead of duplicating the layout.