Flexbox layout with Collections

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 :blush:

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