Horizontal Masonry Grid Layout - Doesn't work inside div set to display Flex..
Hi Web Bae, thank you for the reply on YT, bringing my updated question here with links and additional context: I replicated your horizontal masonry grid and style display setting on the elements, I was getting some weird display behavior (overlapping text etc) until I realized that if only the Collection List is set to display Flex and everything else is set to display as Block, the masonry grid works. What I can't figure out is how to get the masonry grid to work inside a div set to display as Flex, so that the Collection List inside the div is sized and centered inside of it (to align with another section I have on the full page version).
Below is a page where I've stripped it down to just the masonry grid, where I am trying to center the masonry grid inside a div (Size and Center Div set to display Block) that's centered inside a parent div (Reviews Div Masonry) set to Flex. I've tried setting the Collection List to Flex and to Block, and a bunch of other variations, but can't figure out a way to get this layout to work (Note - Reviews Div Masonry OFF is the copy that has the correct settings with Flex set only on the Collection List, I've turned masonry off (changed the ID to masonry-off) and hidden this version, it's just there to keep an example of what works handy)
Here is the live staged page: https://wonderdo.webflow.io/en/posie/5-1-2024-reviews-masonry-troubleshooting
Here is the preview page in the designer: https://preview.webflow.com/preview/wonderdo?utm_medium=preview_link&utm_source=designer&utm_content=wonderdo&preview=81b173dbf76e794eba6a8dc267eb22ff&pageId=6632b29aae5173ba9071af01&locale=en&workflow=preview
5.1.2024 Reviews Short Long Show Hide
How to put on and care for your Posie® or Poser® posture support thingy.
![No description](https://cdn.answeroverflow.com/1235661286856200192/Screenshot_2024-05-02_at_11.35.34_AM.png)
1 Reply
@Web Bae Following up on this, I tried using grid instead of flex layout above the Collection List (in hierarchy) to size and position (center) the collection list , same issue, it seems like anything other than block layout above the collection list (in terms of what the collection list ladders up to hierarchically) causes all the content to look like this screenshot. Thx!