Snippets / CSS
CSS
Masonry Layout
S
Steven Ellis
·
352 views
·
Updated 1 year ago
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
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
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 · 11 lines