html - Understanding grid negative values

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

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>