Flexbox layout with Collections

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

1 Like

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="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>
//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!

1 Like