The grid-template-* properties define explicit grid tracks: the rows and columns declared for a grid container. Grid items can extend beyond those tracks, causing the browser to generate implicit tracks so the grid can contain them. section 5.4
Use explicit tracks when the structure is known; let implicit tracks handle changing content.
- Implicit tracks default to auto sizing, growing as needed to contain their item contents. section 5.4
- Set grid-auto-rows or grid-auto-columns when generated tracks need a consistent size such as 1fr. section 5.4
- A column-defined grid can add rows automatically as items wrap, avoiding a layout tied to a fixed item count. section 5.4
A portfolio with implicit rows
Define responsive columns with grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); then use grid-auto-rows: 1fr. As photographs fill the columns, additional rows are generated automatically.
