Flexbox layout with Collections

[Washound (Adam Strange)]

Is it possible to make a flex box layout with Collections like in the picture below?

[anthonysalamin]

Hi @Washound,

You could maybe try masonry or isotope to get this kind of layout.
Not sure you would need flex box for that.

I used masonry on my webflow portfolio and linked it to a collection list, worked like a charm.

[Washound (Adam Strange)]

Thanks. I’m new to Webflow and don’t really code

[anthonysalamin]

No need to code really.
Only thing you need to do is copy the code below into your footer custom code section (on your project settings like on the screenshot I made for you)

<!-- jquery 3.0 -->
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.1.js"></script>
<!-- masonry script -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
//use jQuery to initialize masonry grid 
(function ($) {
    'use strict';
	$(window).load(function(){
		$('.masonry').masonry({
			  itemSelector: '.masonry-item',
		});
	});
}(jQuery));
</script>

Then in the webflow designer, just add a normal collection list. The only thing you need to do, is add a “masonry” class to the collection list element and a “masonry-item” class to the collection’s item. That’s it !

Hope it helps

If you need more flexibility by filtering and ordering your items, you might want to use the isotope solution For a simple layout however, masonry is good enough.

[Washound (Adam Strange)]

That’s Awesome! Thank you!