All styling & sizing of items in the grid, as well as the filter buttons is controlled within Webflow. You decide how to setup your columns/grid - for each media query size. Isotope will handle the filtering/interaction/screen re-drawing. All filtering is handled by adding classes to a grid item.
- You have a “.grid” container that holds all your stuff you want to be in your filterable grid layout…
- Your stuff is any div, image, etc with an “.item” class within the “.grid” container…
- You have a container called “.filters” that holds all your buttons.
Want to filter by blue? Simply add a blank class named “blue” to any item you want filtered in your grid container. Then create or duplicate a button & give it a custom “data-filter” attribute with a value of “.blue”.
I couldn’t seem to get the built-in “current” class in the jQuery code to carry over for the life of me. So the faux “current” class functionality you see on the filter buttons is actually just a “focused” state within Webflow. So again, no custom code or styles outside of the editor to mess with in terms of styling - you have complete creative freedom within the Webflow interface. Want your filters to be pictures of cats, dogs, and unicorns? Go for it.
Anyways, feel free to play around & clone Enjoy.