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>

@TemaniAfif i dont understand your question. -1/-1 does not work, -2/-1 does work. 1/1 and 2/2 also work. Why does -1/-1 not work is my question — fogx, Jul 30 '19 at 09:39
in your code I don't see any `-2` so I am asking if you meant `2` instead — Temani Afif, Jul 30 '19 at 09:40
i updated the jsfiddle with a commented out -2 at the spot. The code has -1/-1 and so the bottom border is not displayed. changing it to -2/-1 displays the bottom border, hence my question — fogx, Jul 30 '19 at 10:00
@Paulie_D, although there is some overlap between this question and the duplicate, they are not the same. This question is more about Grid error handling. — Michael Benjamin, Jul 30 '19 at 12:33
@Michael_B there is actually no overlap at all, since spanning is NOT the issue here (i even wrote how its done in my question). I will update the question to make it very clear... — fogx, Jul 30 '19 at 12:34

Michael Benjamin · Answer 1 · 2019-07-30T13:37:43.810

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.

score 8 · Accepted Answer · edited Jun 20 '20 at 09:12

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

Understanding grid negative values

2 Answers2

1 / 1

-1 / -1

`-2 / -1`

Linked

Related