Why can I define named lines with "-start" or "-end" but assign placement without those suffixes.

I just wrote about a grid layout that makes aggressive use of named lines. In building the demo (and editing the article), I introduced something that I don't understand.

You can define line names that use the "-start" and "-end" suffixes and then assign items to line names without using the suffix.

Here's a CodePen demo and an extremely reduced test case:

.grid {
    display: grid;
    grid-template-columns: 150px [two-start] 150px;
    grid-template-rows: 150px [two-start] 150px;
}

.child {
    grid-row: two;
    grid-column: two;
}

This appears to work in the latest Firefox, Chrome, and Edge (still not Chromium as of this writing), but I can't find an explanation for why in the spec. My best guess is that some weird combination of implicit line names (from named areas) and the way custom identities get resolved make this work. However, I can't tell if it should work. It seems "suspicious" that it works in all major browsers.

What's going on? Is it just dumb luck that this worked? Is it a bad idea no matter what?

rachelandrew / cssgrid-ama

Why can I define named lines with "-start" or "-end" but assign placement without those suffixes. #159