Understanding grid negative values - html

Question

I'm trying to make a grid that has a full span row at the bottom.
For full span columns I can use grid-column: 1/-1.
For single span columns I can use grid-column: 1/1.
For single span rows I can use grid-row: 1/1.
But if I want to define the last column or row, I have to write grid-column: -2/-1.
Why is the syntax not the same as with 1/1 for the first column/row? Or am I making a mistake somewhere?
I also made a jsfiddle to demonstrate my problem: jsfiddle
.grid-container {
display: grid;
grid-template-columns: 5px 1fr 1fr;
grid-template-rows: minmax(50px, 2fr) 1fr 1fr 1fr 1fr 1fr 15px;
}
.grid-item {
width: 1fr;
}
.header {
display: flex;
grid-column: 2/-1;
grid-row: 1/1;
justify-content: center;
}
.border-left {
background: purple;
grid-column: 1/1;
grid-row: 1/-1;
}
.border-bottom {
background: #410266;
grid-column: 2/-1;
/* grid-row: -2 / -1; this will work, -1/-1 will not */
grid-row: -1 / -1;
}
<div class="grid-container">
<div class="header"> HEADER </div>
<div class="border-left"></div>
<div class="grid-item">1 </div>
<div class="grid-item">2 </div>
<div class="grid-item">3 </div>
<div class="grid-item">4 </div>
<div class="border-bottom"></div>
</div>

Answer 1

The grid-column and grid-row shorthand properties count grid lines.
You wrote:
For single span columns I can use grid-column: 1/1
This doesn't make any sense. It resolves to:
grid-column-start: 1
grid-column-end: 1
So you're defining a column that goes from the starting line to the starting line.
A column has a starting line and an ending line. So to span the first column you use:
grid-column: 1 / 2
The only reason your code works as you expect is because the Grid error handling algorithm removes the end line when the start and end lines are equal.
So 1 / 1 resolves to 1 / auto, where auto represents a default span of 1.
You wrote:
But if I want to define the last column or row, I have to write grid-column: -2/-1
Yes, that's one way to do it. (You can also use positive integers, since you know the number of columns.)
You wrote:
Why is the syntax not the same as with 1/1 for the first column/row? Or am I making a mistake somewhere?
1 / 1
As mentioned above, 1/1 was invalid. It is fixed by the Grid system, resolving to 1 / auto. As a result, you span the first column.
-1 / -1
This combination of values is also invalid. It means span from the last line of the grid to the last line of the grid. Grid error handling changes the end value to -1 / auto. This takes you out of the explicit grid (because an implicit column is created) and negative values no longer apply. The negative values end where the implicit grid begins (demo).
-2 / -1
Correct syntax. So it works. Span one column starting from the penultimate line of the grid.

Answer 2

when using the same value inside grid-column/grid-row you will fall into this rule:
If the placement for a grid item contains two lines, and the start line is further end-ward than the end line, swap the two lines. If the start line is equal to the end line, remove the end line.ref
So saying grid-column:-1/-1 means grid-column:-1 which is grid-column:-1/auto
auto
The property contributes nothing to the grid item’s placement, indicating auto-placement or a default span of one. (See § 8 Placing Grid Items, above.)
So basiclly you said to your element to start at the last line and span one column which will create an implicit new column:
A basic example to illustrate:
.box {
display:grid;
grid-template-columns:20px 20px 20px;
grid-auto-columns:100px;
grid-gap:5px;
}
span {
grid-column:-1/-1;
height:40px;
background:red;
}
<div class="box">
<span></span>
</div>
You can see that the span is having 100px which means it create a new column inside the implicit grid and is not inside the explicit one defined by 20px
When using -2/-1 it's clear that you will consider the before the last and the last line and the element will be placed in the last explicit column:
.box {
display:grid;
grid-template-columns:20px 20px 20px;
grid-auto-columns:100px;
grid-gap:5px;
}
span {
grid-column:-2/-1;
height:40px;
background:red;
}
<div class="box">
<span></span>
</div>
Same logic apply when using positive value but you won't notice a strange behavior since you will most likely span an explicit column thinking it's correct to specify, for example, grid-column:1/1