The very first thing you need to know about CSS is that it uses the language of print layout, not programming.

A lot of the problems programmers seem to have with CSS probably stem from this misapprehension.

Do you have a reference for this particular usage of slash? In print, “x / y” is often used to mean “item x out of y” [0], for example in page numbers. I’m only familiar with using slashes for ranges in ISO 8601, where it has purely syntactic reasons and (AFAICT) doesn’t adopt any preexisting convention.

I imagine the slash in CSS grid is for similar syntactic reasons, because the syntax also admits hyphenated identifiers [1] (custom-ident), which precludes the use of “-”. (They could have used a range operator like “~” or “..” though.)

[0] https://en.wikipedia.org/wiki/Slash_(punctuation)#Numbering

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column...

And that is exactly what 1/3 means in CSS Grids, the element occupies the grid from slot 1 to 3.

“1 of 3” is not the same thing as “1 to 3”, so I don’t think they mean the same thing here.

As far as I know, 1/3 means "one of three" in print - which actually is division ("1 of 3" means the subject's position is 1/3 of the way through).

CSS uses "/" for division (fractions) inside `calc`, so I don't think not understanding the language of "print" is where the frustration comes from nowadays. I think CSS is also part programming language now.

Imagine telling a programmer that in CSS - !important means "important!", not "not important" :-)

While I like grid functionality, the syntax is really different from lot of other CSS, and it's confusing imho. It's like this corner where you can see they either developed it in isolation or felt they were "going to do it right this time" or something.

Numbers are far from the only thing that can go there, including multiple words on each side of the slash: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column...