A CSS Grid item is styled `grid-column: 2 / span 3`. Which lines does it occupy, and what would `grid-column: span 3 / 6` place instead?

## What span actually means Every placement value on an axis resolves to two lines. Numbers and names identify a line directly; `span` does not. It states a **track count**, and the grid derives the missing line by counting that many tracks away from the line the other half of the value pins down. The grammar is `span <integer>` where the integer is 1 or greater, optionally combined with a line name. `span 0` and negative counts are invalid, and an invalid placement value makes the declaration fail rather than clamping. ## Span attached to the end ```css .item { grid-column: 2 / span 3; } ``` The start is line 2. The span counts three tracks forward: columns 2, 3 and 4. The end line is therefore 5. This is identical in effect to `grid-column: 2 / 5`, but it says something different in source: the item is *three columns wide*, not *ending at line 5*. That distinction matters for maintenance. If a column is inserted before line 2 and the item's start is updated, the span form needs no other change, while the hard-coded end line has to be recomputed. ## Span attached to the start ```css .item { grid-column: span 3 / 6; } ``` Now the pinned line is the **end**, line 6, and the span counts three tracks backwards: columns 5, 4 and 3. The start line is 3. This form is the natural way to say "three tracks wide, flush against this trailing line", and it composes with negative lines: `grid-column: span 2 / -1` means "two tracks wide, ending at the last line of the explicit grid" — a right-aligned block whose width is fixed but whose position follows the template. ## Span on its own A span with nothing pinned, such as `grid-row: span 2`, fixes the item's size at two tracks and leaves both lines unresolved, so its position on that axis is decided by the grid's automatic placement rather than by the declaration. That is the usual way to say "this card is two rows tall, put it wherever it fits". ## Named lines with span The span count can also be a count of *named* lines rather than tracks. If a template names lines with `repeat(4, [col] 1fr)`, then `grid-column: col 2 / span col 2` starts at the second line named `col` and ends at the second subsequent line named `col`. This form is worth recognising in code even if you rarely write it, because `span <name>` counts occurrences of that name, not tracks — a genuinely different meaning from `span <integer>`. ```css .grid { display: grid; grid-template-columns: repeat(4, [col] 1fr) [col]; } .item { grid-column: col 2 / span col 2; } ``` ## What span is not Span is not a line number, so `grid-column: span 3` never means "start at line 3". It is not a maximum either — the item covers exactly that many tracks, and if the count reaches past the end of the explicit grid, the grid generates the tracks needed rather than clamping the item. And it is not a way to reach the end of the grid: there is no `span all`, so full-width placement is written `1 / -1`. ## Both halves as spans Writing a span on both sides, as in `grid-column: span 2 / span 3`, is legal syntax but under-specified: nothing pins a line, and the span contributed by the end half is dropped, leaving the item two tracks wide with its position resolved automatically. It is best avoided in real stylesheets because the value reads as if both numbers matter when only one does. ## Choosing between span and an explicit end line Use an explicit end line when the item's edge must align with a specific structural boundary — a sidebar that must stop exactly at the content line. Use a span when the item's *size* is the invariant — a card that is always two columns wide wherever it lands. The two forms are interchangeable arithmetically, so the choice is about which fact you want the stylesheet to state, and which one you want to survive an edit to the template.