Masonry Layout

Description/Instructions

Hello,

Just wanted to share with you lot my solution for making a Masonry Layout with a little bit of CSS.

Hope this is helpful.

Thanks

Instructions

1. Using the Post feed (VX) widget, select your post type and keep all the settings as default.

2. Put a class on the Post feed (VX) widget, here I have called it work-grid.

3. Put a class on the Preview Card, here I have called it work-card.

4. Add the CSS, tweak however you like!

.work-grid .post-feed-grid {
display: block !important;
column-count: 3 !important;
column-gap: 20px !important;
column-width: 320px !important;
}
.work-grid .post-feed-grid .work-card {
break-inside: avoid;
position: relative;
margin-bottom: 20px;
}

  • CSS
Copy Code

Let's Chat About this Snippet