A grid track is the space between two adjacent grid lines: a row or a column. Tracks give a CSS grid its structure. Where a row track and a column track overlap, they form a cell; an item spanning multiple cells occupies a larger grid area. A gap, when defined, lies atop the grid lines. section 5.2
Set up a page layout
For a page with a main region and sidebar, `grid-template-columns: 2fr 1fr` creates two column tracks and three vertical grid lines. `grid-template-rows: repeat(4, auto)` creates four row tracks. The header and navigation can span both columns, while the main region spans the bottom two rows beside two sidebar tiles. A cell may also be left empty for whitespace. section 5.2
Track choices affect placement and sizing:
- Use numbered or named grid lines to place items across tracks. Names such as `left-start` and `left-end` let `grid-column: left` select the area between them; `span 2` extends an item across two tracks. section 5.3.1
- Use explicit tracks when the structure is known. If an item needs space outside them, the grid generates implicit tracks. These default to `auto`; `grid-auto-rows` and `grid-auto-columns` can set their sizes. section 5.4
- Expect content in one item to influence the size of its entire track, affecting other items in that track. For content-led, one-directional arrangements, flexbox may be a better fit. section 5.2.2
- If fixed-size tracks leave unused space in the container, use `justify-content` or `align-content` to position or distribute the tracks. section 5.6
Let a portfolio grow
A photography portfolio can define columns with `repeat(auto-fill, minmax(200px, 1fr))` and leave rows implicit, so more images can add rows. Featured images can use `grid-row: span 2` and `grid-column: span 2`. If a large image will not fit, automatic placement may leave a gap; `grid-auto-flow: dense` lets smaller items backfill it, potentially changing their display order. section 5.4 section 5.4.1
Listing 5.4 Applying a top-level page layout using grid
*,
::before,
::after {
box-sizing: border-box;
}
:root {
--gap-size: 1.5rem;
}
body {
background-color: #709b90;
font-family: Helvetica, Arial, sans-serif;
}
.stack > * + * {
margin-block-start: 1.5em;
}
.container {
display: grid;
grid-template-columns: 2fr 1fr; #1
grid-template-rows: repeat(4, auto); #2
gap: var(--gap-size);
max-inline-size: 1080px;
margin-inline: auto;
}
header,
nav {
grid-column: 1 / 3; #3
grid-row: span 1; #4
}
.main {
grid-column: 1 / 2; #5
grid-row: 3 / 5; #5
}
.sidebar-top {
grid-column: 2 / 3; #5
grid-row: 3 / 4; #5
}
.sidebar-bottom {
grid-column: 2 / 3; #5
grid-row: 4 / 5; #5
}
.tile {
padding: 1.5em;
background-color: #fff;
}
.tile > :first-child {
margin-top: 0;
}
The page-layout CSS shows how declared row and column tracks combine with line-based placement to position the main region and sidebar. section 5.2
