Join the Voxel Guide Community!

Get Involved

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

Chat Toggle
Voxel Guide AI
Voxel Guide AI
Voxel Guide AI
Voxel Guide AI
Ask me anything about Voxel!
Send
Powered by AI24