What does `grid-column: 1 / -1` do to a CSS Grid item, and in which case does the -1 fail to reach the last visible column?

## Two ways to count the same lines Every line on an axis has two names: a positive index counted forward from the start edge and a negative index counted backwards from the end edge. In a grid with three columns there are four column lines, addressable as 1, 2, 3, 4 or as -4, -3, -2, -1. Line 4 and line -1 are the same line. There is no line 0 and no line -0. Counting begins at 1 in both directions. ```css .grid { display: grid; grid-template-columns: 200px 1fr 200px; } .full { grid-column: 1 / -1; } /* same as 1 / 4 here */ .last { grid-column: -2 / -1; } /* the final track */ ``` ## Why 1 / -1 is the idiom for full width Writing `grid-column: 1 / 4` hard-codes the column count into the item's rule. Add a fourth column to the template and the banner silently becomes three-quarters wide. `grid-column: 1 / -1` expresses the intent — "from the first line to the last" — and keeps working when the template changes. The same idea applies on the row axis with `grid-row: 1 / -1`, and to partial placements: `-2 / -1` always means the final track, whatever its index. ## The explicit-grid boundary The important qualifier is that negative numbers are resolved against the **explicit grid** — the tracks your `grid-template-columns`, `grid-template-rows` or `grid-template-areas` declare. A grid can also gain **implicit tracks**, generated automatically when content needs to live outside the template. Those implicit tracks sit outside the negative numbering entirely, so `-1` never refers to them. The symptom is a full-width element that is not quite full width: ```css .grid { display: grid; grid-template-columns: repeat(3, 1fr); } .wide { grid-column: 4 / 5; } /* forces a fourth, implicit column */ .banner { grid-column: 1 / -1; } /* still ends at the template's last line */ ``` Here the visible grid is four columns wide but `-1` resolves to line 4, the end of the three declared tracks, and the banner covers only three of them. Nothing is invalid; the numbering is simply doing what it is specified to do. The same trap appears on the row axis whenever items overflow into implicit rows. `grid-row: 1 / -1` on a sidebar covers only the rows the template declared, not the extra rows the content generated. If you want the sidebar to stretch across everything, you either declare enough rows explicitly or use a different mechanism such as spanning from the start with `span`. ## The fix is to make the track explicit When `-1` stops short, the answer is not to guess a larger negative number — implicit tracks cannot be addressed that way at all. Either extend the template so the track becomes explicit, or restructure the placement so it no longer depends on the end of the grid. Declaring the track explicitly is usually right: it also lets you size it, whereas implicit tracks fall back to `grid-auto-columns` or `grid-auto-rows`. ## Negative numbers on either side of the slash Both halves accept negative values independently, so `grid-column: -3 / -1` spans the final two tracks, and mixed forms like `grid-column: 2 / -1` (from the second line to the end) are perfectly ordinary. As with positive numbers, the smaller resolved line becomes the start, so ordering mistakes are corrected rather than rejected. ## Relation to spanning `grid-column: 1 / -1` is the only concise way to say "all the way to the end" — there is no `span all`. Combining a span with a negative end line, as in `grid-column: span 2 / -1`, is valid and reads as "end on the last line, cover two tracks back from it", which is a neat way to pin something to the trailing edge of a grid whose width you do not want to hard-code. ## Practical rule Use `1 / -1` for full-width bars, headers and footers inside a grid; use `-2 / -1` to pin to the last track; and remember that both promises hold only for the grid you declared. The moment a layout starts generating tracks on its own, the end of the explicit grid and the end of the visible grid stop being the same line.