[css-grid] Auto-placement aligning to a named line

[rachelandrew]

I have seen a couple of requests from authors to be able to auto-place to the next available row or column line with a certain name.

This came up in a Q&A that I am running, and there is also an earlier request for this behaviour detailed on the www-style list, and on the wiki for possible L2 features. Raising this issue just to capture these in one place.

• Discussion on www-style - June 2015
• Use case as raised on CSS Grid AMA
• Note on the wiki

[sunpietro]

is there any progress on this topic?

[fantasai]

Proposal: use auto <custom-ident> to mean the same as auto except the line it resolves to has to be named <custom-ident>.

[css-meeting-bot]

The Working Group just discussed Auto-placement aligning to a named line, and agreed to the following resolutions:

• RESOLVED: Add this proposal to grid L2

The full IRC log of that discussion

<dael> Topic: Auto-placement aligning to a named line
<dael> github: https://github.com//issues/796
<dael> Rossen_: RachelAndrews raised this, but she's not on. fantasai can you summerize?
<dael> fantasai: There have been several requrests to do auto placement but filter out lines that don't match a name. Right now auto placement uses auto keypwrd. Add a custom ident for the name after the auto. So auto and the name would only do placement on lines with that name.
<dael> fantasai: This is level 2 of grid.
<dael> Rossen_: Seems reasonable. I'm trying to understand primary use case
<dael> fantasai: Example wanting to have narrow and wide columns, some items should go in narrow and some in the wide. You name the lines to make the distinction and then be able to filter out the ones that match what you're looking for.
<dael> Rossen_: Okay. What's behavrio if I list all named lines?
<dael> fantasai: Proposal is you only have one custom ident. A line can have many names so if it matches any name it matches. That's the same as looking for lines. If you wanted various behaviors you'd name the lines differently.
<dael> TabAtkins: Identical to if you spec a line name right now. It's just giving you auto placement with same behavior.
<dael> Rossen_: Sounds reasonable. What do others think?/
<dael> florian: I like it
<dael> rego: Level 2?
<dael> Rossen_: Yeah.
<dael> rego: Another commonly requested feature is spanning until last line including implicit grid?
<dael> fantasai: There's another open issue on that
<dael> Rossen_: Obj to accepting proposal to add to L2?
<dael> RESOLVED: Add this proposal to grid L2

[thany]

Can I just add, an unnamed line would be desirable as well. This would essentially give developers the ability to insert a "newline" into a grid.

[fantasai]

Related: #3243

[kepstin]

One thing I've run into is that I'd like to be able to use auto-placed grid items, aligned to named lines, with spans.

Right now, you can make an auto-placed item which spans two columns by doing e.g.

.grid > .span-2 {
  grid-column: span 2 / span 2;
}

My understanding is that this acts the same as if you specified grid-column: span 2 / auto;. Then on specific objects that you need to manually place, you can override one of grid-column-start or grid-column-end to set the position relative to either the start or end of the grid, and since the other property which you did not override is still set to span 2, the item will continue to span 2 columns.

I expected to be able to do the same, except aligning to and spanning a specific number of named lines, by doing grid-column: span 2 line-name / span 2 line-name; - unfortunately, this doesn't work at all. It looks like because of the incompatibility of spanning named lines and auto placement, this ends up being equivalent to grid-column: auto / auto - effectively grid-column: span 1; - you don't even get the correct number of columns, let alone constrained placement to named grid lines.

Assuming the syntax auto <custom-ident> is used to indicate auto-placement constrained to named lines, it seems like grid-column: span 2 line-name / span 2 line-name; should end up behaving as if you had specified grid-column: span 2 line-name / auto line-name;.