Span all the things

At some point in the past, my mind stored grid-column: 1 / span all as a valid piece of code when i want to have an item being placed across all columns, especially when the number of columns is changing over screen sizes. Turns out, i was very wrong.

tl;dr grid-column: 1 / -1 is the solution.

Let's say, we have a 2-column grid with 3 items and of the grid item shall be a full-width item.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1rem;
}

.grid-item--full {
  grid-column: 1 / -1;
}

The resulting grid spans the full-width item over the 2 columns and has 1 gap inbetween the columns.

If instead i would use span all, the grid would add another gap after the second column and span the element across this gap as well.

.grid-item--full {
  grid-column: 1 / span all;
}

So, why does the grid add another gap when using span all?

If i understand things correctly, this has to do with the implicit grid and named grid lines.

First, grid-column: 1 / span all; does not show up as invalid in the developer tools. My best guess is, that it's syntactically valid and the browser thinks it's a name for a grid line. Only that i never declared this.

On the MDN article for grid-column we can read for the span keyword:

If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.

Implicit grid lines. Well, well… With this i directly went to Grid by Example, one of the best resources for CSS Grid. There, Rachel Andrew explains:

However if we try and place an item outside of that grid the browser will create an Implicit Grid line or lines in order to hold that item. […] By default the implicit grid tracks created by the implicit lines will be auto sized.

So yeah, i'd say, with grid-column: 1 / span all; i was trying to place an item outside of the grid.