Grid Column as Flex Container

[preflight]

...that's part of why I'm collecting these use cases and seeing which things we can't do. As that's how we figure out what we need next.

Here is another use case for a Masonry-style layout discussed here.

Consider this product-page layout:

Characteristics of the layout:

• optimal source order shown in parentheses
• all heights are unknown and relative heights are unknown:
  • Image can be tall or short
  • Description can be long or short
  • Lede's height can vary widely
• some items might not exist for all products (Formats, Preview, Links)

Problem analysis:

• The mobile version is easy to solve on its own with Flexbox (however...)
• The desktop version can't be solved by either Flexbox or Grid without adding wrapper divs (if anyone sees a way, please correct me)
• Adding wrapper divs for the desktop version breaks the Flexbox layout of the mobile version

Proposed solution: Grid Layout enables positioning all items in their correct column and order, but every "row" clears the one above it. If Grid columns could behave like Flex containers, where the items within could be told to align ala flex-start, this Masonry-style layout would be possible with our current toolset.

Caveat: As @rachelandrew said here, this isn't the problem Grid intends to solve. One could argue the layout isn't a "grid" at all.

Postscript: I just finished your two books on grid layout - truly remarkable work. Thanks for helping us all add these valuable tools to our toolboxes.

[rachelandrew]

There is a thread on the CSS WG repo regarding these layouts, which is the best place to post this as a comment https://github.com/w3c/csswg-drafts/issues/945

Thanks for nice comments on the books, I'm glad they were useful :)