[andrewingram]

Here's my favourite example of a layout that to the best of my knowledge, you can't solve with flexbox. I've only been able to solve it with JavaScript

A grid representation of a list, let's say a list of image thumbnails along with small amount of other data. Something like the image grid in iPhoto.

What's so hard? Let me expand the requirements. I want the dimensions of each item to be identical, let's say a square. I also want each item to be as close to a specific size as possible, but scaled up or down slightly to allow each row of items to exactly fit the width of the containing element. With the exception of the last row, which is allowed to be unfilled.

You can nearly do this with flexbox. The only problem is that the elements in the last row will be stretched to fill the row if it's short a few items. It's also fairly awkward ensuring the height of an element matches it's width, the current solution seems to be a hack involving padding-bottom.

I'm planning on trying out http://gridstylesheets.org/ to see if it's expressive enough for what I want. Of course, the catch is that I'm still depending on JavaScript.

[dunham]

Can you add at least one row worth of empty items? They'll spill into an extra row and get stretched, but you won't see them.

[andrewingram]

That's a novel approach. The catch is that the number of items per row is fluid, so you'd have to overestimate on how many extra items you'd need, then you have the problem of not knowing how much overflow to hide for the parent container. Unless i'm misunderstanding your idea?

[mcot2]

Is this possible with CSS grid layout? Flexbox and grid were supposed to be complementary but Flexbox seems to have a major head start on actual implementations.