grid-column-end has to be one number bigger, than there are columns

Question

Given this CSS grid example:

ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  list-style: none;
}

li {
  background: rgba(128, 0, 0, .5);
  border: 1px solid #666;
}

.four {
  grid-area: 2/1/2/4;
}

<ul>
  <li>Col 1</li>
  <li>Col 2</li>
  <li>Col 3</li>
  <li class="four">Col 4</li>
</ul>

Can anyone explain, why I do I need to set the grid-column-end to 4 if there are only three columns?

From what I understand from the MDN docs, the grid-area should be grid-area: 2/1/2/3; – but that would result in the li.four only spanning two columns.

To me this seems like a strange bug, because I need to span column 1-4 to actually have a visual span of a row over three columns.

Answer 1

Can anyone explain, why I do I need to set the grid-column-end to 4 if there are only three columns?

grid-column-end, along with its other related properties, target column lines, not tracks.

Therefore, grid-column-end: 4 is targeting the fourth column line, which is the right-side border (in LTR) of the third column.

^{Firefox Dev Tools (background color changed for demo purposes)}

From what I understand from the MDN docs, the grid-area should be grid-area: 2/1/2/3 – but that would result in the li.four only spanning two columns.

As you can see, grid-column-end: 3 is the right-side border of the second column.

And grid-row-end should be 3 (not 2). The layout works anyway because, since the start and end lines are both 2 (creating no track), the end value is invalid and falls back to the default, which is a span of 1.

These properties – grid-row-start, grid-column-start, grid-row-end, and grid-column-end – are referred to in the spec as line-based placement.