The grid-column shorthand places a grid item between a starting and ending vertical grid line. For example, grid-column: 1 / 3 spans the first two columns. The slash separates grid-column-start from grid-column-end, and surrounding spaces are optional. section 5.2.1
Use numbered or named lines to express the intended column placement:
- Use line numbers such as 1 / 2 for the first column or 1 / 3 for a two-column span. section 5.2.1
- Use span when the item should cover a specified number of tracks, such as grid-column: 2 / span 2. section 5.3.1
- Use named lines or named areas when readable structure matters: grid-column: left or grid-column: left-start / right-end. section 5.3.1
- Let the browser auto-place an item when only its span is specified or when no explicit row is given. section 5.2.1
A main column and stacked sidebar
With a two-column grid, place the main content in the left column and the sidebar tiles in the right column: .main { grid-column: 1 / 2; grid-row: 3 / 5; } .sidebar-top { grid-column: 2 / 3; grid-row: 3 / 4; } .sidebar-bottom { grid-column: 2 / 3; grid-row: 4 / 5; } To make a header span the entire grid, use grid-column: 1 / 3. section 5.2.1
Listing 5.6 Grid layout using named grid lines
.container {
display: grid;
grid-template-columns: #1
[left-start] 2fr #1
[left-end right-start] 1fr #1
[right-end]; #1
grid-template-rows: repeat(4, [row] auto); #2
gap: var(--gap-size);
max-inline-size: 1080px;
margin-inline: auto;
}
header,
nav {
grid-column: left-start / right-end;
grid-row: span 1;
}
.main {
grid-column: left; #3
grid-row: row 3 / span 2; #4
}
.sidebar-top {
grid-column: right; #5
grid-row: 3 / 4;
}
.sidebar-bottom {
grid-column: right; #5
grid-row: 4 / 5;
}
A complete named-line layout shows how grid-column can place headers across the grid and assign main and sidebar content to named areas. section 5.3.1
For responsive card layouts, grid-template-columns can determine how many equal-width columns fit at the current viewport; grid-column then remains available for explicit placement when the layout needs it. section 17.2.1
