[css-grid] axis names

[chharvey]

https://www.w3.org/TR/css-grid-1/#grid-concepts

From the spec,

There are two sets of grid lines: one set defining columns that run along the block axis (the column axis), and an orthogonal set defining rows along the inline axis (the row axis).

This seems backwards to me. The set of grid lines containing the columns should be called the column axis. This axis, in top-bottom writing modes, would be horizontal—parallel to the window's x-axis and to the inline axis. The set of rows should be called the row axis, which, in top-bottom writing modes, would be vertical—parallel to the y- and block axes.

From a mathematical point of view, the name of the axis indicates the values that lie on that axis. E.g. the "x-axis" is the axis on which x-values increase. So it seems that naturally, the axis on which column numbers increase should be called the column axis (horizontal), and the axis on which row numbers increase (the vertical axis) should be called the row axis.

I'm not sure if switching these terms is a good idea, however, given the precedent and the status of the CSS Grid Layout Module Level 1 document (currently, Candidate Recommendation). However I wanted to express my concerns anyway, in case my viewpoint hadn't been considered.

[SelenIT]

Block and inline axes are defined in css-writing-modes-3. The whole point of the flow-relative directions (as opposed to physical directions) is that in vertical writing modes the block axis becomes horizontal, and the inline axis becomes vertical. The columns and the rows of the grid, respectively, do the same. So I see no contradiction in the current definition.

[Loirooriol]

@SelenIT But the problem seems that the names should be the opposite. In an horizontal writing mode, the block axis is vertical, and the spec says this is the column axis. But columns are vertical in an horizontal writing mode, so the column axis should be the one which intersects each column: the horizontal one.

[SelenIT]

Oh, I see now. It seemed so natural for me to interpret the column axis as a direction where the columns go (as it is currently in the spec) that it took two comments just to make me see the other possibility to interpret it:)

Now I can understand the logic behind calling 'the column axis' the axis perpendicular to the colums direction, but I'm still not convinced that this would be 'more natural'. In everyday use, 'the column direction' is clearly the direction where the columns themselves go, not where their numbers go. And having 'column axis' perpendicular to the 'column direction' seems rather surprising (for me, at least). With mathematical x-axis, there is no such problem, we usually think of x-values not as of vertical lines, so 'the x-value direction' seems to be clearly horizontal.

Maybe it would be better to remove the terms 'row axis' and 'column axis' at all, leaving just block and inline axes which don't have that ambiguity?

[rachelandrew]

I've encountered people confused by the Column and Row terminology as well. I'd generally prefer to teach Block and Inline to people, the multiple names seems more confusing than helpful.

[FremyCompany]

Feel free to make a pull request to update the terminology to always use one of the terms, and remove the other. Will make it easier to review the impact.

[chharvey]

@SelenIT — I like the idea of using block-axis and inline-axis to be consistent with the writing mode and direction. I haven't tested, but I assume in a vertical writing mode that the "column axis" (as it is currently called) would be horizontal, and "row axis" (current definition) would be vertical? In that case it does indeed seem counter-intuitive to call them "columns" and "rows".

So this poses the question of whether or not to rename all the grid properties (e.g., grid-template-columns) relative to writing mode. But I think if we convince ourselves that "column" and "row" need not directly correspond do "vertical" and "horizontal", respectively, then we can let the property names slide.

I still think that the current naming of the axes should be revisited. If "column-axis" and "row-axis" can't be switched, I'm in favor of "block-axis" and "inline-axis."

In fact, while we're at it, it would also be nice if "cross-axis" and "main-axis" (in the Flexbox layout) were also respectively changed to "block-axis" and "inline-axis," for consistency's sake.

[Loirooriol]

@chharvey I wouldn't change the terminology in flexbox. For example, in horizontal writing mode, the block axis is defined to be vertical, but you can still have either a vertical or horizontal main axis via flex-direction. I guess it would be possible to redefine block and inline axis to mean different things depending on the formatting context, but changing the terminology would be confusing because flex layout does not have blocks and inlines, all flex items are blockified.

But 'row axis' and 'column axis' don't seem to be relevant in CSS Grids, they are only used in a sentence which references both and in an example. I don't see any problem in removing them. Otherwise they should be swapped for consistency.

┌————————————————————————————→  Inline axis
│  ┌─Block─────────────────┐
│  │ ┌─Inline─┐ ┌─Inline─┐ │
│  │ └────────┘ └────────┘ │
│  └───────────────────────┘
│  ┌─Block─────────────────┐
│  └───────────────────────┘
↓ Block axis

┌—————————————————————————————————→  Row axis (current definition)
│        ┌─Column─┐  ┌─Column─┐
│  ┌─Row─┼────────┼──┼────────┼─┐
│  └─────┼────────┼──┼────────┼─┘
│  ┌─Row─┼────────┼──┼────────┼─┐
│  └─────┼────────┼──┼────────┼─┘
│        └────────┘  └────────┘
↓ Column axis (current definition)

[javifernandez]

I'm not sure row/column terminology is that useless for Grid, really. Many of the Grid CSS properties uses these concepts (grid-template-{columns, rows}, grid-auto-{rows, columns}, grid-auto-flow: [row | column], ...)

Additionally, row and column axis are terms specific to the grid container, while grid items may have orthogonal inline/block axis. This is specially useful when implementing the alignment logic defined in the CSS Box Alignment specification.

https://drafts.csswg.org/css-align-3/#align-grid

align-self Axis The grid’s column axis (block axis).

Note that align-self is a grid item's property, but it operates along the column axis, which certainly is the block axis, but not respecting the grid item's flow direction, but grid container's one.

Even more, all this concepts are specially important when implementing Baseline Alignment, which
in the case of grid it can operate along both axis, aligning the items between themselves in both
dimensions.

In summary, I don't see such a problem on having this grid specific terminology. It may be redundant
in some cases, but it helps to understand the behavior of grid in some other cases, probably the most
complex ones. I think it's quite similar to what Flexbox's cross and main axis provide, actually.

[tabatkins]

Reasonable arguments can be made for making the "column axis" (and "row axis") go in either direction:

• "column axis" should be oriented the same way as columns themselves (vertical in English)
• "column axis" should be the direction that a column grows (vertical)
• "column axis" should be the direction that you add new columns in / number the columns (horizontal)

(2) and (3) from above both correspond to how block/inlines work - as you add more content to a block/inline, it grows vertical/horizontally, but if you add more blocks/inlines, they also get added vertically/horizontally, so you can't use block/inline as a pattern to follow here.

Ultimately, it was "column axis should put you in mind of a column" that decided us on the current definition.

[Loirooriol]

Personally I think that was a bad decision, but the reasoning is interesting. Maybe you can include it as a note in the spec to avoid confusion?

[fantasai]

Added note, as requested. Let me know if it needs further tweaking, closing issue for now~

[SelenIT]

In her recent article Understanding Logical Properties And Values, @rachelandrew makes a very important point for naming the axes as proposed here:

In CSS Grid Layout the Block Axis is also referred to as the Row Axis, which is why the Block Axis properties are grid-row-start and grid-row-end.
...the Inline Axis is the Column Axis with the properties grid-column-start and grid-column-end.

If renamed this way, the names of the axes would be consistent with the Logical Properties/axes names (as Rachel explains further in this article). Maybe it would make sense to reopen this issue?

[fantasai]

Reopening per @SelenIT’s comment.

[css-meeting-bot]

The Working Group just discussed axis names, and agreed to the following resolutions:

• RESOLVED: Remove these terms from the grid spec

The full IRC log of that discussion

<dael> Topic: axis names
<dael> github: https://github.com//issues/1299
<dael> fantasai: SelenIT commented that rachelandrew article had the opposite meaning of row-axis and column-axis as what's in the grid spec. We only use them in a handful of spaces and since most people learn grid from rachelandrew it's probably better to match her.
<dael> rachelandrew: I've commented before that people struggle to learn this. People are used to a main and a cross which you don't have in grid. People are explaining it all sorts of ways It's gone around and around.
<dael> fantasai: 3 options. 1 is don't change the spec 2 flip to match rachelandrew 3 remove termonology.
<fantasai> Reasoning for the spec is in https://github.com//issues/1299#issuecomment-298106439
<dael> TabAtkins: I'm in favor or removing the termonology. Both schemes make sense. Flipping to the other doesn't have a compelling reason because other people will not understand. WE should use block and inline
<fantasai> terminology is in https://drafts.csswg.org/css-grid-1/#grid-concepts
<dael> rachelandrew: I prefer block and inline.
<dael> Rossen: rachelandrew can you fix and teach people the way we have intended this to be spec?
<dael> rachelandrew: I'd prefer us to use block and inline.
<dael> Rossen: I think it's fine but also spec what the row and columns are correctly.
<dael> fantasai: Note that the axis names appear 3-5 times total.
<dael> Rossen: I'm slightly opposed because the column and row axis are something which applies to internal layout of grid. Easy to rationalize which is which. Even thought inline and block axis apply externally the two aren't nec the same.
<dael> fantasai: Exactly the same.
<dael> fantasai: Question...which is the row axis? Horz or vert?
<dael> Rossen: Vertical.
<dael> fantasai: It's horizontal in the spec.
<dael> fantasai: If we want to match your head we need to flip.
<dael> Rossen: Row is if you add more rows so it's how it advance.
<dael> plinss: Thing you put in a row progress horizontally.
<dael> astearns: I hear these terms aren't used much in the spec. What damange does removal cause?
<dael> TabAtkins: Every time we use the terms we also call it block or inline in parans.
<dael> fantasai: There's no occurance of these terms where both aren't used.
<dael> astearns: Usless terms. Cause confusion. WE should remove.
<ChrisL> row-progression-direction
<dael> RESOLVED: Remove these terms from the grid spec