Grid Placement & Template Areas
Beyond auto-placement, Grid lets you put items exactly where you want — by line numbers, by named lines, or by drawing the layout as named areas. Subgrid lets nested elements align to their parent's tracks.
Grid lines
A grid with three columns has four vertical lines, numbered 1 to 4 from the start; negative numbers count from the end (-1 is the last line).
grid-column: 1 / -1 means "from the first line to the last" — full width, however many columns there are. grid-area can set all four at once: grid-area: row-start / col-start / row-end / col-end.
Template areas
The most readable way to define a layout is to draw it with names:
Each string is a row; each word is a cell. Repeating a name spans that area across cells, and a . leaves a cell empty. Areas must be rectangles.
Rearranging at breakpoints
Only the template changes between screen sizes — the HTML and the item rules stay the same. Resize the window to see the sidebar move.
Named lines
Lines can be named in square brackets. Names ending in -start and -end create an implicit area, so grid-column: content spans from content-start to content-end. This "full-bleed" pattern is popular for article layouts.
Auto-placement and dense packing
grid-auto-flow: dense back-fills holes left by larger items. It may reorder items visually, so use it only when the order doesn't matter.
Subgrid
With grid-template-rows: subgrid, each card's rows line up with the parent grid's rows — so titles, descriptions and buttons align across all the cards, even when their content lengths differ.