RE: [css-grid] Varying-width Grids

> This is one of the complaints about flexbox:
>   https://twitter.com/AlanHogan/status/519256635911307265/photo/1
>
> It's really more of a grid-layout problem, but we can't actually solve it 
> in CSS Grid Layout. Probably something that should be fixed in this level,
> as it's quite common.
> 
> Constraints as far as I can tell:
>    * Size grid columns to >= multiples of X.
>    * Flex gutters equally to fill the width of the container.
>    * Auto-fill grid.
> 
> We could probably leverage 'justify-content' to deal with the second point. 
> Auto-fill is already there. The main issue is the first item. Perhaps it's 
> something we can do with a repeat() function?

Ok, forget my message on twitter, I understand the issue you were talking about now.

If I had to come up with a solution, I would add a new property:

 grid-auto-columns-mode: auto | always

The "auto" value means that we only add columns if we have still items to place automatically column by column (grid-auto-flow: column) but ran out of columns.

The "always" value means that (in addition to the previous behavior) columns get also added in "grid-auto-flow: row" mode & when an the automatic insertion pointer should move to a subsequent row for the first time as a result of the wrapping behavior. In such case the action is delayed as long as implicit columns can be appended to the grid without resulting in a horizontal space shortage on any row already defined on the grid (I believe this can be determined using the sole base-track-width & min-content sizes). Those additional columns are only preserved if adding them allowed an additional item to fit in the currently considered row (otherwise, they are discarded).

As soon as the pointer is forced to move to a subsequent row because adding a new auto column would cause horizontal space shrinkage, this behavior is disabled (because adding columns at this point would affect how previous automatic items would have been placed); as a result, the behavior for subsequent auto items becomes identical to "auto", but with potentially new columns being defined. NOTE: This is similar to the case when the grid is in "grid-auto-flow: column" mode, as "grid-auto-columns-mode: auto" and " grid-auto-columns-mode: always" have the same effect in this situation too.

Does it seems a viable solution?
François

________________________________
PS: If there's a need to repeat more than one column in the auto-insertion (this is not the case in your example, but it could probably happen), this proposal will have to rely on the proposed L2 extension of the grid spec allowing "grid-auto-columns" to accept multiple columns having to be inserted at the same time.

Received on Tuesday, 7 October 2014 16:07:06 UTC