Re: [css-grid] Varying-width Grids

On 10/07/2014 02:51 PM, Tab Atkins Jr. wrote:
> On Mon, Oct 6, 2014 at 5:02 PM, fantasai <fantasai.lists@inkedblade.net> wrote:
>> This is one of the complaints about flexbox:
>>    https://twitter.com/AlanHogan/status/519256635911307265/photo/1
>>
>> 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?
>>
>> Post ideas here. :)
>
> This *particular* case can be viewed as a Grid issue, but there are
> other very closely related cases that are clearly Flexbox, and so this
> should still be solved in Flexbox.
>
> For example, the items might not all be the same size, so you lose the
> "column" aspect.  Still, though, when you can fit several items onto a
> typical line, if the last line contains substantially fewer items,
> it'll produce huge eyesore gaps.  (This is similar to why we don't
> justify the last line of a paragraph.)
>
> Or the items could be flexed rather than aligned, in which case,
> again, if the last line has substantially fewer items than the typical
> line, the items on that line will grow to huge sizes and look very
> different from everything else.
>
> I came up with a fix for this in Flexbox, and plan to put it into
> level 2 - we need a property that, when flipped on, generates
> "phantom" boxes on the last line (or maybe all lines, controllable
> with the property) with a size equal to the average size of everything
> else on the line, and generates enough to fill up the empty space.
> Then you do layout normally, and remove the phantom boxes afterwards.
> This produces good alignment and flexing behavior on the last line
> regardless of how many items there are.

I think that's a very weird behavior, and I'm not convinced it's that
useful or understandable.

Fundamentally this case is grid: you want alignment in two dimensions.
If the items are different sizes, you'll likely want them to somehow
stretch to fit the grid lines anyway.

> That said, I'm pretty sure we also need to address this kind of thing
> for Grid.  I'm pretty sure that when we add row-gap/column-gap, we'll
> need some automatic behavior matching the align-content keywords, like
> you suggest here.
>
> What's the problem with the first item that you mention?

We have no way to say "generate N columns where N is picked using the
multicol formula". In other words
   N  =  floor(grid-container-width / desired-column-width)

(There also the problem of those gaps, which are automatically flexed,
but not auto-filled with content; we cannot do this now, either. But
as I said, justify-content could be defined to automatically create
gutters when a distribute value like 'space-between' is chosen.)

~fantasai

Received on Tuesday, 7 October 2014 23:35:51 UTC