[css-grid] Auto-placement and named lines

I have some feedback regarding the automatic placement algorithm in Grid
Layout. Apologies if this has already been discussed & rejected – I tried
searching the archives.

When I started playing around with grids & automatic placement, I really
liked the fact that you could specify a span without that giving the item a
definite placement on the grid. I was thrilled to learn of named grid
lines, and that spans can be across specific names. The one thing I feel is
missing is to constrain the automatic placement to not just span across
named lines but also *only start at specific names*.

To clarify what I mean by this, say you have the following grid declaration:

```
.grid {
  display: grid;
  grid-template-columns: repeat(8, [foo] 1fr [bar] 1fr);
}
```
Every odd grid line is "foo", every even line is "bar".

In order to place items automatically, but only on lines named "foo", I
would then need to do something along the lines of...

```
.foo-item {
  grid-column: foo;
}
.foo-item-spans-two {
  grid-column: foo/span 2 foo;
}
```
...which obviously goes against the current algorithm & syntax. For it to
work, the bit in the spec interpreting a named start line without a
numbered line index would need to not fallback to 1, but rather
auto-increment until an available slot is found (and also not interpret
that item as having definite placement, somehow).
If that road is closed, the alternative syntax could perhaps be something
like...

```
.foo-item {
  grid-column: span 2 foo;
  grid-column-auto-snap: foo;
}
```
...or somesuch. It is ugly, I know.

* * *

Basically, I have two use cases so far for this.

1. "Multiple sets of grid lines in one grid".
Declaring a grid with several "sets" of named grid lines. Say I wanted to
have a grid that could do both columns of 1/7th of the overall width, or
1/5th. The percentages would be rather funky and work out to this (when
named with whether they start a "fifth" column or a "seventh" or both):

```
.grid {
  grid-template-columns: [seventh fifth] 14.285%
                         [seventh]       5.71%
                         [fifth]         8.57%
                         [seventh]       11.43%
                         [fifth]         2.86%
                         [seventh]       14.285%
                         [seventh]       2.86%
                         [fifth]         11.43%
                         [seventh]       8.57%
                         [fifth]         5.71%
                         [seventh]       14.285%;
}
```
On top of that grid, you could for example do "quantity queries"[1] with
nth-child, for example, to have some really clever auto-placement logic,
instead of placing items one-by-one.

2. "Advanced gutters".
I'm really happy that the row-gap/column-gap properties have made their way
into the spec. There was something off to me about using empty grid tracks
as gutters. There seemed to be almost an affordance to do so in e.g. the
dots for anonymous grid cells in the grid-template-areas syntax, while the
auto placement algo still has no mechanism to treat them in any way
separate. So a separate set of controls for gutters were welcome. But, so
far that means all gutters are uniform in size etc. Having the auto
placement algorithm able to "skip" the gutters would be another tool to
handle gutters in a smart way, if the *-gap properties are not enough.

I really believe that the auto placement algorithm is one of the best parts
of the Grid Layout spec, so I for one would be really happy to see this
stuff work.

[1] "Quantity Queries for CSS" -
http://alistapart.com/article/quantity-queries-for-css


//emil

http://thatemil.com
http://twitter.com/thatemil