Yup, doesn't make any sense to me. I think this API would have been better:

* grid-column-index-start

* grid-column-index-end

* grid-column-length

PS: I have to say though that this grid thing is fucking awesome, and this game to learn this grid thing is fucking amazing as well.

I've being coding HTML since 2001, and have started using CSS in 2005. I can say that I've been dearly missing tables until now.

> Grid columns and rows are 1 indexed instead of 0, ensuring a coming decade of mistakes due to the mismatch with Javascript (and, y'know, everything else) conventions for arrays

but consistent with the rest of CSS IIRC, for example nth-child starts at one

True enough, but that causes much less damage because except in the rarest situations, you never write code to do random access to an array of children, you just iterate over them without using indices at all.

This is opening up a situation where you have a 2D Javascript array for a model and a bunch of components in the layout (a chessboard, imagine). And the coordinates won' t match!

What is your concern? Code beauty? What kind of programmer can't deal with converting between 0 and 1 based arrays?

What kind of programmer can't remember to check return values of system calls?

What kind of programmer can't deal with properly escaping input under the control of the user?

What kind of programmer can't deal with keeping array indexes in bounds?

(tl;dr: you. And me.)

None of that is like dealing with 0/1 arrays. Almost everything you encounter in real life starts with 1, not 0. If anything it's the 0 based array that should be consider "wrong" and the cause of so many errors. But we use 0 based arrays because of the C/assembly legacy where the 0 means the location of the array with a 0 offset.

What kind of programmer hasn't learnt from and embraced the fact that programmers are human and that humans make mistakes?

Its easy for sure but I think you agree that we don't want random multipliers or string prefixes to array idexes just for fun.

`order` starts at 0. https://developer.mozilla.org/en-US/docs/Web/CSS/order

`order` is a little bit different though as it doesn't set the position. Instead "Elements are laid out in the ascending order of the order value". So an element with order: 1 will move to the end in a group of elements with no order defined, similar to z-index I guess.

Example: https://jsfiddle.net/5uvpco6e/

Additionally, you can count from the last grid divider with minus numbers. You can have -1, but I can imagine some pushback against -0.

Lots of languages (c.f. python) do negative indexes with the first one starting from zero. The last element is indeed -1, because the element selected is simply the array-size-modulus of the index. It wraps exactly how you expect, and a few tricks use this.

CSS grid's negative indexes, hilarious, don't even get this right. If the first element is 1 then the last must be 0, right? No, it's not. Nor is it -1. It's negative two. Don't ask. I don't know.

You're not wrong on the first point, but I imagine consistency with the front and back of the index was on the spec designers minds.

I do have to point out that your second point is not correct. Remember it's not grid areas, it's grid dividers. So the final grid line <strong>is</strong> in fact -1.

See my very hasty little Codepen: https://codepen.io/jodi/pen/ZeNRJZ

And can someone explain the reasoning behind using slashes? Why change the syntax of a million other css rules that just use spaces?

Sometimes there are multiple values within a dimension, for example: grid-template: 50% 50% / 20% 80%;

And hence, otherwise, it would be ambiguous. Slashes are almost always used in CSS to disambiguate things that would otherwise be ambiguous.

Slashes are hidden all over the place in CSS shorthand properties (for example, you can use a slash to specify both font-size and line-height together in a "font:" declaration).

In my experience CSS is often written by non-programmers. So maybe they were assuming that CSS developers wouldn't be familiar with starting counting at 0? That the y/x instead of x/y thing is bizarre. Even elementary or middle school kids learn it as x/y.

> y0 / x0 / y1 / x1. Has any API anywhere ever tried to specify a rectangle like this?

Not for rectangles, but the closest example of Y/X I can think of is GW-BASIC's "locate". It gets row number first and column number next. I.e Y/X

it's css not javascript?