-
Notifications
You must be signed in to change notification settings - Fork 746
Closed
Labels
Closed as Question AnsweredUsed when the issue is more of a question than a problem, and it's been answered.Used when the issue is more of a question than a problem, and it's been answered.css-grid-1
Description
-
This is no change request at all. Way too late! This is more of an "academic" question:
- What were the design considerations of the original/later authors behind grid lines starting to count at 1?
-
Please answered here in this very issue. Plus later in a section of the spec, if adequate.
- A specification usually only states how something shall be, but mostly not why something is as it is.
- But in some specs, at least regarding fundamental principles, rationales or certain Don't-s are explicitly and transparently stated. To spare re-evaluations and/or prevent later changes and common pitfalls already ruled out for good reasons.
- So maybe in the section 3, entitled Core Concepts of the Grid (in the original working draft 20110407), now Grid Layout Concepts and Terminology (valid 20201218 version), the essence of the design rationales and/or a link to an extended pro/con evaluation would be appreciated!
CSS Grid Lines — Line Count starts at 1
Source: Figure 7 shown in section 3 Core Concepts of the Grid (original 20110407 working draft)
Geometry — All Coordinate Systems use 0 as their origin point
Images sources: All from the respective linked Wikipedia articles.
- The origin point of a coordinate system is at 0 in 1D, 2D, and 3D.
- Every pupil learns that at school.
- 0 (x) in 1D on a Number line
- 0/0 (x/y) in 2D, the Cartesian coordinate system
- 0/0/0 (x/y/z) in 3D, the Euclidian space
Practical reason behind origin 0 for geometrical applications seems obvious
- Put your finger at 0.
- Now you can very easily express both vectors or dimensions.
- Vector: e.g. move an object by 3 units: Move finger to 1,2,3. Done.
- Dimension: e.g. object shall be 5 units long. Move finger to 1,2,3,4,5. Done.
- No +1 offset. Very easy.
Problems with CSS grid line numbering in the spatial mental model of the user
- With the short syntax forms like
grid-column: item1-start / item1-end;
I somehow still manage to get it right.- You start at line 1 and end at line 2.
- But what you have created is track nr 1.
- You note the offset?
- At latest with the shorthand formats which state more positional values my mental gymnastics problems start:
grid-area: row-start / column-start / row-end / column-end
this always breaks my mental process. Why?- The (seemingly) analogous expression in a coordinate system is
p1x / p1y / p2x / p2y
. - But then you always need to add "+1".
- This complicates things with the human mathematical short term memory!
- Not only in the original calculation. But also when further spanning/shifting.
- Always one extra computation step. Complicates it unnecessarily.
- I very often catch myself to make mistakes with this, and only get it right at the second try or after some trial-n-error.
- The (seemingly) analogous expression in a coordinate system is
- Why was this usability / practicality issue not caught during speficication?
- Or did the advantages of a "consistent 1-index in CSS lingo" outweigh that particular con?
Probably because all of CSS uses 1-index (ex: :nth-child)
justintoon on Dec 24, 2018
- Or did the advantages of a "consistent 1-index in CSS lingo" outweigh that particular con?
My attempts to search for reasons in the spec
- Nothing at all which could serve as an explanation.
- If somewhere in the specification then I would have expected it here, given the section title.
- Here would be a worthy place to state the rationales/considerations.
- A short explanation:
When a name is not specified, Grid Lines can be referred to in the order which they occur. The first line is 1, the second 2 and so on.
- But no reasons stated. Would also be inappropriate here.
- That's closest to how you work in a coordinate system, so if stating a memory hook, then here.
- But found no explanation/hint here either.
Metadata
Metadata
Assignees
Labels
Closed as Question AnsweredUsed when the issue is more of a question than a problem, and it's been answered.Used when the issue is more of a question than a problem, and it's been answered.css-grid-1