Grid Layout Syntax

grid-layout-syntax.md

grid-row: span 2/3

The original syntax was:

grid-row-span: 2;

My concerns

• I do not understand why this was altered.
• The newer syntax is harder to understand than the old one.
• The newer syntax tries to do too many things at once.
• Would prefer separating row-span from the grid-row shorthand - just like background-size is separate.
• Original grid syntax solved smaller use cases. Would prefer to still retain that simplicity for larger early adoption.

It was altered because we moved from an asymmetric position+span model based on rows and columns to a symmetric line-based one, where the four properties each position one of the edges.

---

You're using a shorthand and comparing it to one of the longhands. A full comparison would be:

grid-row: 3 / span 2;

vs

grid-row-position: 3;
grid-row-span: 2;

Not really any different now, is it?

---

Note that the example you chose is, funnily enough, impossible to express in the old syntax, because of the asymmetry. Your example places the bottom edge in row 3 and then spans 2 rows upward. Sure, this is equivalent to just writing grid-row: 1 / span 2;, but it's distinct if you're using named lines.

---

Define "too many things at once". Can you list the things you think it's doing that it shouldn't be?

---

The whole point of a shorthand is to combine things, so you can set multiple properties conveniently. There are longhands if you want separate things. If you want to pretend it's the old days, that's easy: any time you want to position something, use grid-row-start or grid-column-start. Any time you want to set the span, use grid-row-end or grid-column-end. If you want to set both positions at once, use grid-area, like

grid-area: 2 / 3;

equivalent to

grid-row: 2;
grid-column: 3;

---

Talking about "adoption" at this point is irrelevant - Grid is already nearly complete in Blink, and finishing up in FF. Been implemented in IE for some time, though with the old syntax. Changing anything would significantly slow the spec, particularly as it would require a lot of discussion about what to do with all the syntaxes like named lines.