Streaming live at 10am (PST)

Flexbox layout with Collections


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


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.


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


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=""></script>
<script src=""></script>
<!-- masonry script -->
<script src=""></script>
//use jQuery to initialize masonry grid 
(function ($) {
    'use strict';
			  itemSelector: '.masonry-item',

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.


That’s Awesome! Thank you!