CMS + Isotope: varying size of grid elements


I’m designing a portfolio page and I’d like to achieve this kind of layout using Isotope. Problem is that I also want to use CMS and I can’t style individual elements within a dynamic list grid. So I can’t have smaller and larger elements together. Is there a way how to do this?


Here is my public share link:

It should be possible to do this using an event handler from isotope, specifically arrangeComplete.

Thanks, but unfortunately I can’t see how it works. It seems to me like more of a filtering function. Also those boxes in the example are using css classes for setting width and height.

Can you be more specific please? I’m not exactly a javascript pro :smiley:

By using arrangeComplete function, you can remove all the width2 combo classes from exiting grid-item(s), then inserting them (e.g.: in positions 2 and 3) based on what is newly filtered.

You can hire a JavaScript pro here

OK… So if I understand it correctly… it will basically target an item (or items) according to some criteria, then change it’s width using Isotope’s columnWidth: and then it will display all the items in the grid.
That could actually work.

Let’s see if I manage to do it :wink:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.