Re: [css-grid] Auto-placement and named lines

Hi Emil,

On 28/06/15 18:40, Emil Björklund wrote:
> 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*.

I think you've a good point. I don't know if it was discussed or not
before either.

The problem I found is what happens when the named line doesn't exist.
Normally, if a named line doesn't exist, we add new implicit lines on
demand and use that name for them.

For example, in a 2x2 grid:
  grid-template-columns: 100px 100px;
If we position an item with:
  grid-column: foo;

The element will be actually placed in the 4th column. As we'd add a new
implicit line "foo" as the 4th line [1].

The problem is that we cannot add new columns while positioning
auto-placed items or we'd need to re-position all the auto-placed items
again.

> 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;
> }
> ```

Regarding the syntax I'd go with something like:
.foo-item {
  grid-column: auto foo;
}
.foo-item-spans-two {
  grid-column: auto foo / span 2 foo;
}

IMHO, it looks less ugly to me than your other proposal. :-)

Bye,
  Rego

[1] https://lists.w3.org/Archives/Public/www-style/2014Dec/0250.html

Received on Tuesday, 30 June 2015 16:59:12 UTC