Isotope fixed container

1 Mar 2011 · by David DeSandro

Some of my favorite uses of Isotope or Masonry are instances where the plugins are used subtly. Instead of designing the interface around the plugin, they can be used to facilitate the end result.

Over on Stack Overflow, Pedalpete was interested in implementing Isotope:

I've been playing about with isotope a bit and have been trying to create a parent container that remains a fixed size, always having 6 smaller items, and reshuffling to fit the 7th larger item.

The first step is to disable Isotope resizing the container. Set the resizesContainer option to false.

To produce the intended result, I used sorting with fitColumns layout mode and updated the sort data whenever a new item was clicked.

View Isotope - fitColumns in fit container on jsFiddle.

Refactor t-shirt

Refactor shirt

You know what’s truly metal? Nicely encapsulated code with human-readable comments.

Printed on super-soft Black Tri-blend. Women's sizes available.