1

And this applies to columns as well. In the same CSS code, I sometimes see the grid-row-start and grid-row-end differing by 1, but sometimes differing by 0. And they seem to mean the same thing: span 1.

For example, this CSS code being linked specified box01 column start end of 1, 3, and for box02, a column start end of 2, 2:

.box01 {grid-area: 1 / 1 / 2 / 3;} 
.box02 {grid-area: 1 / 2 / 3 / 2;}

Then why would we sometimes specify the same and sometimes differing by 1? Are they identical in every way? (is it supported by the specs?)

nonopolarity
  • 146,324
  • 131
  • 460
  • 740
  • well, Michael_B is already explaining for positive vaiues so this can be a duplicate but I will leave my answer since I already made the effort ... – Temani Afif Jan 26 '20 at 19:46

1 Answers1

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.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • so whenever we see `grid-row: 3 / 3` that means to some degree it should have been written as `3 / 4` or just `3` – nonopolarity Jan 27 '20 at 06:52
  • @nopole yes exactly and more presicely it's the same as `grid-row: 3` because the browser will make it like that and since the default span is 1 it's also the same as `3/4` – Temani Afif Jan 27 '20 at 09:56