Re: [csswg-drafts] [css-grid-2] Masonry layout (#4650)

@argyleink I believe that if the desire result is what you drew in your first diagram, you can already do that today using Multicolumn. 

![masonry 002](https://user-images.githubusercontent.com/108474/72972385-a7bc1c80-3dcb-11ea-92e5-0bac48dc6813.jpeg)

The key with Masonry is the content order. The Masonry JS library can do both of these content orders:

The default order puts the next item in the order as close to the top as possible.
![masonry 004](https://user-images.githubusercontent.com/108474/72972480-ce7a5300-3dcb-11ea-9e0b-1d0ce123f551.jpeg)

An alternative order (`horizontalOrder: true`) usually puts the next item in the next column, without regard to how close to the top the next slot is:
![masonry 005](https://user-images.githubusercontent.com/108474/72972597-084b5980-3dcc-11ea-9cde-e8d70601bd83.jpeg)
 
I believe Masonry-style layout belongs in Grid, because the algorithm is thinking about both the rows and columns, and autoplacing content with regards to both. Flexbox can be thought of as a long content snake, that wraps around and around... same with multicolumn. Masonry requires "jumping" from one column to another — there's no content snake. No long unbroken wrapping chain. 

Making this part of Grid also gives Authors all the other powers of Grid — track sizing, names, etc. 


-- 
GitHub Notification of comment by jensimmons
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4650#issuecomment-577602456 using your GitHub account

Received on Thursday, 23 January 2020 09:39:40 UTC