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.

I actually like this and its usefulness would be solving the issue presented initially in this thread. I think it's valuable to fix this in flex since authors are using it due to it being implemented in Webkit/Blink/Gecko/IE. As far as understanding it, that would depend on the intuitiveness of the property that Tab came up with.

Greg

Received on Wednesday, 8 October 2014 01:53:06 UTC