A grid cell is one space formed where a horizontal grid track and a vertical grid track overlap. Grid items can fill one cell or span multiple columns or rows, creating a larger grid area. section 5.2 section 5.0
Use these related grid parts to reason about placement:
- Grid lines form the boundaries around rows and columns. section 5.2
- Grid tracks occupy the spaces between adjacent grid lines; horizontal tracks are rows, and vertical tracks are columns. section 5.2
- Grid areas combine one or more cells into a rectangle between two vertical and two horizontal grid lines. section 5.2
- A cell may remain empty when the layout needs whitespace. section 5.2
A two-column page grid
A layout with two columns and four rows contains eight cells. The header and navigation span both columns, the main area occupies two cells in the first column, and two sidebar tiles occupy the remaining cells in the second column. Rules such as grid-column: 1 / 2 and grid-row: 3 / 5 place the main item across two rows, so its grid area contains two cells. section 5.2
Figure 5.3 The parts of a grid
Inspect the labeled diagram of grid lines, tracks, cells, and areas. section 5.2
