- From: Morten Rand-Hendriksen via GitHub <sysbot+gh@w3.org>
- Date: Tue, 15 Aug 2017 19:04:02 +0000
- To: public-css-archive@w3.org
>From my perspective Masonry layouts run counter to the core premise of grid layouts as layout-in. For a Masonry layout to be created, the grid must be laid out to fit the grid items which is the opposite of how grid layouts work (define a grid, then place contents within that grid). Working with various Masonry solutions including original Masonry, Isotope, and Packery I constantly encounter the challenge of having to either wait for all the items (in particular images etc) to be loaded into the browser before painting the Masonry layout, or forcing a Masonry layout at the onset and then repainting it once the items are fully loaded to correctly size each item and avoid overlaps. Either way is clunky and creates a sub-optimal user experience, especially on image heavy sites and slow connections. On top of this comes RWD which makes things all the more challenging, especially if the columns are fluid. To me, while Masonry may _look like_ a grid layout, it's actually an item-out layout modality with unified horizontal sizing + margin/padding/gutter properties applied. As @MrGrigri and @simonlayfield demonstrate in their visual examples, the items in Masonry are laid out using something akin to a scanline approach where the browser paints horizontally from left to right, top to bottom, and places items at the first available space. A pure CSS method for building the example above could be to define pseudo-columns for the parent container stating "descendants will be displayed three across" and then telling the browser that each descendant item is a Masonry item with pre-defined horizontal and vertical gutters. The browser then places each item within the first open vertical area of the first available pseudo-column from the top down. I have no idea what that would look like markup wise, but I don't think it would fall under the grid spec. -- GitHub Notification of comment by mor10 Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/945#issuecomment-322557779 using your GitHub account
Received on Tuesday, 15 August 2017 19:04:02 UTC