Understanding Grid Negative Values

Understanding grid negative values

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>

What does negative values for Grid Layout Indicate

Negative values for gridx and gridy indicate relative positioning, i.e. the component is placed just to the right of the component added before (for gridx) or just below the component (for gridy).

You should not use negative values directly but GridBagConstraints.RELATIVE instead.

Using negative integers with implicit rows in CSS Grid

You can only use negative integers in an explicit grid.

See the Grid spec here:

7.1. The Explicit
Grid

Numeric indexes in the grid-placement properties count from the edges
of the explicit grid. Positive indexes count from the start side
(starting from 1 for the start-most explicit line), while negative
indexes count from the end side (starting from -1 for the end-most
explicit line).

and here...

8.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties

If a negative integer is given, it instead counts in reverse, starting
from the end edge of the explicit grid.

Making a grid area span an entire column / row, including implicit tracks, when the number of tracks in the grid is unknown, is not possible in CSS Grid Level 1, unless you want to try to hack it.

For CSS grid, is specifying grid-row-start the same number as grid-row-end the same as differing by 1?

From the specification there is some special rules to handle some particular cases:

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.

If the placement contains two spans, remove the one contributed by the end grid-placement property.

If the placement contains only a span for a named line, replace it with a span of 1.

Basically, if the end line is the same as the start line, it's not valid so the browser will remove the end line and it will fall to auto

Then you can read:

grid position

The grid item’s location in the grid in each axis. A grid position can be either definite (explicitly specified) or automatic (determined by auto-placement).

grid span

How many grid tracks the grid item occupies in each axis. A grid item’s grid span is always definite, defaulting to 1 in each axis if it can’t be otherwise determined for that axis.

And also

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 if you define grid-column:1/1 it means you defined grid-column-start = grid-column-end = 1. We remove the end and it's like you only have grid-column-start:1 and by default the span is 1 so visually you will have the same result as doing grid-column:1/2

We can say both are the same but the first one (defining the same number) will be considered as invalid and the Grid Placement Conflict Handling will make it behave as the second one which is the correct way to do.

Pay attention as this is not the same when dealing with negative values. See this related question: Understanding grid negative values

---

There is propably other particular cases but you should avoid using the same number because it's not logical and you will rely on the browser to correct your mistake.

Why are these Random Numbers slowly gravitating towards a negative value?

Due to the floating point standard that Javascript implements, doing arithmetic with decimal values is buggy to say the least...

One work around is to convert the decimals to integers by multiplying by 100, doing the math then dividing by 100.

This only works well if you have at most 2 decimals places. If you require more precision than that, I would recommend a language other than Javascript for that part.

---

Related Topics