Trying to implement masonry layout in Flex

[srgupta-twilio]

Hi Paste team,
We designed a customer profile for Flex where all the information in the panel highlighted can be configured by business admins. They can configure any no. of cards with any number of key value pairs in it. For all cards of varying heights to fit together, we want to implement masonry layout. We are seeking support for ways to develop this with Paste.

This is how it works without the masonry layout (as rows of fixed height that we are trying to avoid)

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Grid max width for cards and inputs - Answer (updated: 11/30/2022, similarity score: 86%)
• Interactive cards with flow (updated: 11/28/2023, similarity score: 85%)
• How to get Grid items to expand to fill available row space? (updated: 01/25/2023, similarity score: 85%)

[srgupta-twilio]

Looping Meg @marnold-twilio

[krisantrobus]

Hi @srgupta-twilio,

Thanks for reaching out. Looking at what you are trying to achieve you can do that currently by nesting Grid and Column components noted in our docs here. You will not need to use masonry grid, it has a great use case for components variably spanning columns but is not required for your use case (correct me if I'm wrong).

I have created an example for you and your developers for how you can achieve this. Note, for default responsiveness using columns of 3 > 2 columns will not wrap nicely (as shown in default example). You will see in the example the whole third column is added to the first and you still see the card spacing issue. If you are using fixed column spans this will not be an issue but if you intend to make it responsive I have given an example of how to achieve this by check the breakpoints and moving card to other columns.

I hope this helps. If you have any further questions please let us know.

[srgupta-twilio]

Thank you. This was really helpful. We are going to use the second option, the responsive layout to make it work.