[csswg-drafts] [css-grid] Ability to have grid items cause cells to be marked as occupied for flow purposes

meyerweb has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] Ability to have grid items cause cells to be marked as occupied for flow purposes ==
Consider flowing a bunch of sized elements into a grid with inflexible tracks.  For example, a number of random images with differing heights and widths into the following grid:

```
grid-template-columns: repeat(10,100px);
   grid-template-rows: repeat(10,100px);
```

Assume each image has its height and width extriniscally set, whether through inline styles or HTML attributes or whatever, but do not have classes characterizing their heights and widths.  If the images have no `grid-column` or `grid-row` values set by the author, they’ll flow into the grid, cell by cell.  This can easily lead to grid items overlapping each other—for example, if an image 100px tall by 250px tall is placed into a cell, it will overlap the next cell and a half to the right of its own cell.

This is not what authors will expect.  (I already expect a recurring theme of people discovering this, finding out it’s by design, and writing outraged anti-Grid thinkpieces.)  It could be useful in some circumstances, so it’s not a behavior I think should be eradicated, but allowing grid items to act a little more like floats (which avoid each other) and a little less like absolute positioning would be useful.

So I’d like to see the ability for grid items to mark all the cells they impinge upon as ‘occupied’, so that other grid items don’t try to place themselves into those cells.  To return to the previous example, a 100px-by-250px image would mark three cells as occupied: the cell to which it is assigned, and the two to its right.  The next grid item would be placed in the next available unoccupied cell.

Initial proposal for handling it: extend `grid-auto-flow` to allow this as an option.  Something like `grid-auto-flow: dense avoid-overlap`.  This would make masonry-style layouts a lot easier to accomplish with Grid, whether using images or text or both.

My expectation would be that the grid item would (by default) stretch to fill all the cells it initially marks as occupied.  That would allow for centering using the alignment properties, for example.  The basic steps of that process would be:

1. Size the grid item as normal.
2. Determine the number of cells on which it impinges.
3. Place the start/end edges of the item along the edges of the grid area defined by the impinged-upon cells.

At least, so far as I’ve thought about it.  That bit might need to be reworked.  But the base idea, of letting grid items avoid overlapping each other as part of the auto-flow process as opposed to forcing authors to class-label elements and specify track spanning explicitly, is definitely worth pursuing.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1394 using your GitHub account

Received on Friday, 19 May 2017 15:59:20 UTC