Upvote 1

Masonry View implementation

Answered Sheraz 6 years ago

I have a dynamic panel which has several material cards inside it . All of them have different heights according to their respective content. If I set the layout as horizontal and use horizontal wrap, it will place my cards right horizontally but the problem arises when I have to place the cards in second row according to the different ending heights of cards in the first row. How should I calculate the height of the card above and add vertical spacing according to it?

Best Answer
photo

Instead of using a horizontal layout, we suggest using a free layout, but pinning the cards to the top of the panel using the pin position options in the properties panel. For the second row of cards, pin them to the center or bottom of the panel and then alter the margin so that it is lower than the card above it.

Replies (1)
photo
2

Instead of using a horizontal layout, we suggest using a free layout, but pinning the cards to the top of the panel using the pin position options in the properties panel. For the second row of cards, pin them to the center or bottom of the panel and then alter the margin so that it is lower than the card above it.

photo
1

Yes that seems like a pretty good solution. I've also thought of it as the appropriate implementation of masonry view. But the problem is when it comes to responsive design. I have to show two cards in a row in case of laptop resolutions and three cards in a row in case of higher resolutions. How should I implement this scenario in which cards adjust themselves according to resolutions and also follow the masonry view?

photo
1

Change their sizes to be percentage based rather than static. Combine that with the pin position and it will work well.

photo
Leave a Comment
 
Attach a file