A grid item is a child of an element with `display: grid`. The parent defines a two-dimensional layout; each item occupies a rectangular grid area that may be one cell or span several. The item's own children do not become items of the parent grid. section 5.1 section 5.2 section 5.4.2
Start with six boxes
Give a container six child elements, then set `.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.5em; }`. The children become grid items in three equal columns and two rows. No placement rule is needed for each box. section 5.1
For a page layout, place an item by its bounding grid lines. `grid-column: 1 / 2; grid-row: 3 / 5` puts the main region in the first column across two rows. A header can use `grid-column: 1 / 3` to span both columns while its unspecified row is placed automatically. Grid lines bound tracks; a cell is where a row and column overlap. section 5.2 section 5.2.1
When the number of items is unknown, let the browser place them. A photography portfolio can define columns while leaving rows implicit: new rows appear as images need them. If a large item cannot fit in the remaining space on a row, automatic placement moves it onward and may leave a gap. `grid-auto-flow: dense` can backfill gaps with smaller items, but their displayed order may then differ from markup order. section 5.4 section 5.4.1
Listing 5.10 Enlarging featured images
.portfolio {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 1fr;
gap: 1em;
grid-auto-flow: dense; #1
}
.portfolio .featured {
grid-row: span 2; #2
grid-column: span 2; #2
}
The portfolio rules show the trade-off directly: featured items span two rows and columns, while dense auto-flow tries to fill spaces they leave behind. section 5.4.1
An item stretches to fill its grid area by default, but its contents need not. For portfolio figures, a column flexbox can grow the image within the figure; `object-fit: cover` fills its box without distorting the image, at the cost of cropping. On narrow screens, another option is to leave elements in normal document flow and make them grid items only above a suitable breakpoint. An item can also become an inner grid; subgrid lets that grid use its parent's grid lines to align card contents. section 5.4.2 section 7.2.3 section 5.5
