Using Isotope plugin with CMS collection and layout GRID

Hello everyone! :slight_smile:

I’ve learnt about Isotope plugin through the super useful project by @SidneyOttelohe
Thanks for making it available!

What I’m trying to do is to have a CMS collection of Resources filterable by category. While I’ve managed to setup Isotope to work when the collection list uses layout “display:block;”, I can’t seem to make it work when using layout “display:grid” (grid looks fine on preview, but on the published site when the script kicks in it looks like the screenshot below).

While I could forget about using display:grid and have a functional filterable list, I’d prefer to use it as the responsive scaling is so much better than what I can achieve with my limited code knowledge…

READ ONLY LINK

Hello Chiara! Can you please share with us the link for the live website as well. Sometimes scripts change/add classes to the elements,causing some styling changes. I want to check if that`s the issue.

Hey @Jeandcc, thanks for having a look into this! The live link is here, password is “Sustain4b1l1ty!”

Any help would be super appreciated :slight_smile:

Thanks heaps!

1 Like

@Jeandcc I should add that I’ve noticed that adding a width to the “collection item” element (say 25%) fixes the layout somewhat, ie the cards actually display in grid formation, however when resizing the browser the grid “autofit” does not work at all… See screenshots below:

Ps. apologies for the unstyled element and broken logo in the nav, still very mucha work in progress :see_no_evil:

1 Like

Don’t worry about the styling , I totally understand!

Where is this whole in the grid coming from, I can’t seem to find the reason. Is it supposed to be here?
image

If it’s a bug, creating a new grid from scratch would be a good idea. Also, removing the minimum width settings for the c.items>resource cards might be helpful.

. Collection Items of grids need to have the width 100%, because their width is defined by the grid settings, and shouldn’t be changed

1 Like

thanks so much for the insights @Jeandcc - I recreated the grid from scratch (no more empty cell!) fiddled with it and adjusted the “resource card” accordingly:
image

However if no width is specified for its parent (.collection-item), aka removing width:25%, the grid layout still acts up :frowning: Unsure on how to fix this :thinking: