Streaming live at 10am (PST)

CMS + Isotope: varying size of grid elements


#1

Hi,

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?

Thanks


http://graphite-3a0604.webflow.io/

Here is my public share link: https://preview.webflow.com/preview/graphite-3a0604?preview=087ce681b8bb64746578276d46322e50


#2

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


#3

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:


#4

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 http://webflowexpert.com


#5

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:


#6

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