[css-grid] Implicit named grid areas don't work properly with indexes

[plinss]

Consider the sample grid:

grid-template-columns: 1fr repeat(4, [icon-start] auto [icon-end] 1fr);
grid-template-rows: [icon-start] auto [icon-end];

To place an item in the 3rd 'icon' grid area I can use:

grid-column: icon-start 3 / icon-end 3;

But these do not work:

grid-column: icon 3 / icon 3;
grid-column: icon 3;
grid-area: icon 3;

[rachelandrew]

In that scenario you would end up with four grid areas all called icon and auto sized, separated by a 1fr track.

icon 1fr icon 1fr icon 1fr icon fr

Which you wouldn't be able to do, with grid-template-areas as the named area has to be a single filled in rectangle. However, the implicit areas don't appear in grid-template-areas, however I don't think there is anything that covers this situation, which is an interesting one.

It might relate to another thing people ask for which is to be able to place a thing into every n track etc, perhaps auto-placing into every area named icon would be possible (essentially skipping the 1fr tracks.

[plinss]

However, the implicit areas don't appear in grid-template-areas, however I don't think there is anything that covers this situation, which is an interesting one.

Right, multiple lines with the same name are explicitly allowed. And grid template areas don't actually exist, they're just a collection of lines with the name of the area and the -start/-end suffixes, so this is a perfectly valid way of creating multiple areas with the same name. We just can't target anything other than the first area without targeting the lines specifically.

Basically I'm asserting here that similarly to using a combination of a named line and an index to target the nth line with a given name, we should be able to target an area with an index as well.

It might relate to another thing people ask for which is to be able to place a thing into every n track etc, perhaps auto-placing into every area named icon would be possible (essentially skipping the 1fr tracks.

See #3243

[tabatkins]

But these do not work:

Correct and intentional. The "area" syntax was designed explicitly with the assumption that there's only a single area of a given name. There's no good notion of what the "third area named icon" is in a 2d context; while we could just evaluate each axis independently, that's not guaranteed to match up with your actual intended areas at all!

For example, imagine that one "icon" area is in the upper-right of the grid, and another is in the lower-left. Using grid-area: icon will actually place the item in the upper-left, because that's the result of finding the first icon-start and icon-end line in each axis. The area syntax is not designed to handle multiple areas with the same name, and it fundamentally can't be designed that way without reifying the notion of areas separate from lines, which we purposely avoided doing.

There are some cases where you can imagine this working "correctly" (such as in your example in the OP), but there's no guarantee of it unless we change the underlying model significantly, which I don't think we should do.

[rachelandrew]

I'd be interested in knowing the use case or the problem you were trying to solve that led you to this, as it's a new thought to me. I've taught in person several hundred folk in workshop situations now, from a variety of backgrounds, and I cover the ability to create areas from named lines and vice versa. People do ask about creating disconnected areas, but usually because of some idea about using CSS to duplicate content, rather than being able to index the things.

[tabatkins]

Is that directed to me or Peter?

[plinss]

Correct and intentional. The "area" syntax was designed explicitly with the assumption that there's only a single area of a given name. There's no good notion of what the "third area named icon" is in a 2d context; while we could just evaluate each axis independently, that's not guaranteed to match up with your actual intended areas at all!

My fundamental point is that areas don't actually exist, they're just syntactic sugar for named lines. Since you can have multiple lines with the same name, then by definition you can have multiple areas with the same name (despite the fact that you can't create them via the grid-template-areas syntax).

Having a declaration of:

grid-column: icon;

is morally equivalent to:

grid-column: icon-start / icon-end;

Therefore:

grid-column: icon 3;

should be equivalent to:

grid-column: icon-start 3 / icon-end 3;

(I accept the the "grid-area: icon 3;" from my example shouldn't work with the example grid template because it should be equivalent to: "grid-area: icon-start 3 / icon-end 3 / icon-start 3 / icon-end 3;")