Re: [css-grid] Varying-width Grids

On Tue, Oct 7, 2014 at 4:34 PM, fantasai <fantasai.lists@inkedblade.net> wrote:
> 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.

Again, yes, *this one particular case* can be done with Grid.  I gave
two nearly identical cases (both of which I've actually run into when
using Flexbox on personal sites) which are definitely not Grid, and
which share the same essential problem with this particular case (the
last line having less than the "typical" number of items).

I encourage you to actually play with an example - find a flexbox in
the wild showing off this kind of bad behavior, manually add some
additional empty items per the formula I described, and see how it
looks.  I've done this, and it looks very natural and intuitive.

>> 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)

Got it, it's the "repeat(), but choose how many repetitions based on
available space" use-case.  Yeah, agree then.

> (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.)

Yeah, we can do some sort of magic interaction between
justify/align-content and row/column-gap.

~TJ

Received on Wednesday, 8 October 2014 02:57:58 UTC