Re: [css-grid] Varying-width Grids

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
>
> 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?
>
> 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.

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?

~TJ

Received on Tuesday, 7 October 2014 18:51:56 UTC