[css-grid] On cells occupied by named grid areas and auto-placement algorithm

Hi,

the grid item placement algorithm has been recently changed so that it
considers that a grid cell belonging to a named grid area is an occupied
cell. This means that auto-placed items won't occupy those cells covered
by a named grid area.

A couple of questions arose while implementing it.

1- Which "named grid areas" should be considered?

A named grid area can be explicitly defined by using
grid-template-areas, that's fine. We could also implicitly define one by
providing a pair of [*-start,*-end] lines for each axis. Both notations
should be equivalent, no problem so far.

The problem appears whenever we define [*-start,*-end] for just one
axis. It's perhaps easier to understand with one example.

   grid-template-columns: 100px [a-start] 100px [a-end] 100px;

A definition like this allows us to "fix" the position of an item in the
second column by just doing "grid-column: a;" (we just need to
automatically select the row).

The thing is, from the auto-placement algorithm POV, and for the example
shown above, should we consider that there is an area which spans all
the rows long in the second column, meaning that items will only be
auto-placed in columns 1 and 3?

Or should we consider on the contrary that there is no area there? After
all the spec says "If a named grid area spans multiple grid cells, but
those cells do not form a single filled-in rectangle, the declaration is
invalid." when defining grid-template-areas.

IMHO we should only consider rectangle areas, meaning that those only
defined in one axis should not be taken into account when deciding about
the occupied/unoccupied status of a cell.

2- Which grid items should be considered?

It seems pretty clear that fully auto-placed items should be clearly not
positioned inside those named grid areas (whatever they are depending on
the answer to question 1).

Now we need to decide what to do with items locked to just a given track
(i.e. "grid-row: a; grid-column: auto;") meaning that for a declaration
like:

   grid-template-areas: ". a ."
                        ". a ."
                        ". b .";

What should happen with an item placed in "grid-column: a;"? IMO we
should consider that we just want to lock the column, so we ignore the
cells occupied by areas "a" and "b" -> item will be placed in row 4. It
could be argued that we could place it inside area "a" but in that case
I think it's fair to expect the author to directly use "grid-area: a"

BR

Received on Friday, 4 March 2016 12:33:34 UTC