In CSS Grid, an item is styled `grid-column: 1 / 3`. What do the numbers 1 and 3 refer to, and how many columns does the item occupy?

## Lines are the coordinate system A grid container defined with `grid-template-columns` and `grid-template-rows` creates **tracks** (the columns and rows themselves) and, between and around them, **grid lines** — the numbered boundaries an item is anchored to. Placement properties never name a track. They name the two lines an item's edges sit on. For N tracks on an axis there are N+1 lines. Three columns means four column lines. Lines are numbered from 1 at the start edge of the explicit grid (the left edge in a left-to-right writing mode), not from 0. ```css .grid { display: grid; grid-template-columns: 100px 100px 100px; /* 3 tracks, lines 1 2 3 4 */ } ``` ## Reading grid-column and grid-row `grid-column` is the shorthand for `grid-column-start` and `grid-column-end`; `grid-row` does the same for `grid-row-start` and `grid-row-end`. The slash separates start from end: ```css .item { grid-column: 1 / 3; /* start line 1, end line 3 */ grid-row: 2 / 4; /* start line 2, end line 4 */ } ``` The item's box occupies everything between those lines. Between column line 1 and column line 3 lie exactly two tracks, so the item is two columns wide. Between row line 2 and row line 4 lie two tracks, so it is two rows tall. The arithmetic is simply `end - start = number of tracks spanned`. ## The off-by-one that trips people up The recurring bug is treating the values as track indexes: reading `1 / 3` as "columns one, two and three". That would be three tracks, and the item renders one track narrower than expected, which looks like a rendering bug but is a counting mistake. A useful mental image: the numbers are the **fence posts**, not the fields between them. Three fields need four posts, and to fence off the first two fields you point at posts 1 and 3. ## Order does not matter, but the smaller line wins the start If you write the lines in the opposite order, the grid swaps them rather than treating the declaration as an error: ```css .item { grid-column: 3 / 1; } /* behaves like 1 / 3 */ ``` This is worth knowing because it means a reversed pair silently produces a valid placement instead of failing loudly. ## Omitting one side Both halves default to `auto`. `grid-column: 1` sets the start line to 1 and leaves the end as `auto`, which resolves to a span of one track — the item is one column wide starting at line 1. Likewise `grid-column-end: 4` alone pins the right edge to line 4 and lets the start be determined automatically. `auto` on both sides is the initial state, which is why an unplaced item simply flows into the next available cell. ## Longhand versus shorthand These three blocks are equivalent: ```css .a { grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4; } .b { grid-column: 1 / 3; grid-row: 2 / 4; } .c { grid-area: 2 / 1 / 4 / 3; } ``` The `grid-area` form takes its four line values in the order row-start, column-start, row-end, column-end, which is a different order from the `grid-column` / `grid-row` pairs and a common source of confusion — prefer the explicit `grid-column` plus `grid-row` pair when clarity matters. ## Lines exist on both axes independently Column lines and row lines are separate numbering systems. Column line 2 and row line 2 have nothing to do with each other. An item is placed by choosing one pair on each axis; the intersection of those two ranges is the item's grid area. ## Why this matters beyond counting Because placement is line-based, an item can be given an area of any size at any position without touching the markup order, and two items may be pointed at the same lines, in which case they overlap in the same cells. Line numbers are also the reason spanning is expressed the way it is: once you think in lines, "start at line 2 and cover three tracks" is naturally written by pairing a line with a span count rather than doing the addition yourself. Everything else in placement — negative line numbers, named lines, area names — is a different way of *naming* a line. The underlying model stays the same: two lines per axis, and the tracks between them.