Episode 4 of 10
Grid Lines
Place items precisely using grid line numbers — span items across multiple columns and rows with grid-column and grid-row.
Grid Lines
By default, items flow into grid cells in order. But you can place items precisely by referencing grid line numbers. Grid lines are the invisible lines between and around columns and rows.
Understanding Grid Lines
3 columns create 4 column lines:
1 2 3 4
| | | |
| c1 | c2 | c3 |
| | | |
3 rows create 4 row lines:
1 ─────────────────
| r1 | r1 | r1 |
2 ─────────────────
| r2 | r2 | r2 |
3 ─────────────────
| r3 | r3 | r3 |
4 ─────────────────Placing Items with Lines
.item1 {
grid-column: 1 / 3; /* Start at line 1, end at line 3 (spans 2 columns) */
grid-row: 1 / 2; /* Start at line 1, end at line 2 (1 row) */
}
.item2 {
grid-column: 3 / 4; /* Third column only */
grid-row: 1 / 3; /* Spans 2 rows */
}Using span
/* These are equivalent: */
grid-column: 1 / 3;
grid-column: 1 / span 2; /* Start at 1, span 2 columns */
/* Span from the default position */
grid-column: span 3; /* Wherever it starts, span 3 columns */Negative Line Numbers
/* -1 is the last line */
grid-column: 1 / -1; /* Span the entire row */
grid-row: 1 / -1; /* Span the entire column */Full Example
<div class="grid">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
.grid {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
gap: 10px;
min-height: 100vh;
}
.header { grid-column: 1 / -1; } /* Full width */
.sidebar { grid-column: 1 / 2; grid-row: 2 / 3; }
.content { grid-column: 2 / 3; grid-row: 2 / 3; }
.footer { grid-column: 1 / -1; } /* Full width */Key Takeaways
- Grid lines are numbered starting from 1 — columns and rows each have their own set
grid-column: start / endandgrid-row: start / endplace items preciselyspankeyword lets you define how many tracks to span-1refers to the last line — useful for full-width elements