Isotope

What Is Isotope?

Isotope is a JavaScript library for building filterable, sortable, and dynamically arranged layouts in the browser. Created by David DeSandro under his Metafizzy label, the same studio behind Masonry, Flickity, and Packery, Isotope takes a grid of items and lets a site filter them by category, sort them by a chosen value, and animate them smoothly into new positions whenever the arrangement changes. It is best known for powering the cascading, gap-free "masonry" grids you see on portfolios, project galleries, and product showcases, but its real distinction is the interactive filtering and sorting layered on top of that layout.

Isotope is a front-end, client-side library. It is not a server platform, a content management system, or a browser extension. A developer includes the script on a page, either by hosting the file locally or loading it from a content delivery network, marks up a container of items, and initializes the library on that container. From that point on, Isotope reads the items, measures them, and positions them according to the chosen layout mode, re-laying them out with animation in response to filter and sort controls. Because all of this happens in the browser against real DOM elements, Isotope leaves clear, inspectable fingerprints in a page's HTML, CSS, and JavaScript.

The library occupies a specific niche. It is not a general-purpose UI framework and it does not handle data fetching, routing, or state management. It does one family of jobs, arranging a set of items into an attractive grid and letting users rearrange that grid interactively, and it does that job in a way front-end developers have trusted for well over a decade. That focus is exactly why Isotope remains common on creative portfolios, agency case-study pages, image galleries, real-estate and listing grids, and any site where a designer wants a responsive, filterable collection of cards or thumbnails without building the layout math by hand.

It helps to be precise about the relationship between Isotope and Masonry, because the two are frequently confused. Masonry is a layout library: it arranges elements of varying heights into a tight, cascading grid and stops there. Isotope includes masonry as one of its layout modes but adds filtering, sorting, and the animated transitions between states. In other words, Masonry is about placement, while Isotope is about placement plus interaction. A site that simply wants a static cascading grid may load Masonry; a site that wants users to click "Web Design" and watch the grid re-flow to show only matching projects is the classic Isotope use case. Recognizing that boundary makes Isotope's detection signals easier to interpret, because its fingerprints are about the interactive layout engine, not the content inside it.

How Isotope Works

At its core, Isotope is initialized in JavaScript against a container element. A developer selects the container, for example a div with a class like .grid, and creates an Isotope instance, passing options that describe which child elements are the items (itemSelector) and which layout mode to use (layoutMode, such as masonry, fitRows, or vertical). In the classic jQuery-based usage you will see a call such as $('.grid').isotope({ ... }), while the vanilla-JavaScript usage constructs new Isotope(element, { ... }). Both produce the same behavior; the difference is only whether jQuery is involved.

Once initialized, Isotope measures every item and absolutely positions it within the container using CSS transforms. This is the key mechanical detail: rather than relying on the normal document flow, Isotope sets each item to position: absolute and moves it with transform: translate(...), then sizes the container to fit. Because positions are driven by transforms, the library can animate items from one arrangement to another simply by transitioning those transforms, which is what produces the smooth re-flow when a user filters or sorts.

Filtering works by supplying a selector or a function. When a user clicks a filter button, the site calls the instance's arrange method with a filter option, for example filter: '.web-design', and Isotope hides the non-matching items and re-lays out the rest into the available space. Sorting works similarly: the site configures getSortData to read a value from each item (a data attribute, the text of an element, a number), then calls arrange with a sortBy option to reorder the visible items. Both operations reuse the same animated transition system, so filtering and sorting feel consistent.

Isotope also manages responsiveness and dynamic content. It listens for window resize events and re-lays out the grid so columns adapt to the new width, and it exposes methods such as appended, prepended, remove, and layout so a site can add or remove items, for example when loading more results, and have the grid rearrange cleanly. Many implementations pair Isotope with imagesLoaded, a companion Metafizzy utility, so the grid re-measures after images finish downloading and items therefore land in the correct positions rather than overlapping. Because the library renders and manipulates real DOM nodes with predictable class names and inline transform styles, those artifacts are some of the most reliable ways to recognize it from the outside.

The lifecycle is worth tracing end to end. On page load, the Isotope script is fetched, the site initializes the library on the grid container, and Isotope performs an initial layout, positioning every item with absolute coordinates and transforms. As images load, an imagesLoaded callback often triggers a re-layout so nothing overlaps. When a user clicks a filter or sort control, the site calls arrange, and Isotope animates the matching items into their new positions while removing the rest. When the viewport changes size or new items are appended, the library re-measures and re-flows. This predictable initialize, layout, filter or sort, re-layout cycle is consistent across versions even as the implementation has modernized from a jQuery plugin to a standalone library.

How to Tell if a Website Uses Isotope

Isotope leaves several dependable signals. Because StackOptic analyzes a URL from the server side, it inspects the same raw HTML, asset references, and inline scripts you can examine by hand with browser tools or curl. The most reliable approach is to combine several of the signals below rather than relying on any single one.

Script filenames. The clearest tell is a request for a file whose name contains isotope. You will commonly see isotope.pkgd.min.js (the packaged build that bundles Isotope's dependencies) or isotope.min.js in <script> tags in the page source. The companion imagesloaded.pkgd.min.js very often appears right alongside it.

CDN paths. Many sites load Isotope from a public CDN. Look for URLs on unpkg.com/isotope-layout, cdnjs.cloudflare.com referencing isotope, or cdn.jsdelivr.net/npm/isotope-layout. Seeing the isotope-layout package name in an asset URL is a strong signal.

Inline initialization code. Sites frequently include an inline <script> that calls Isotope. Searching the page source for the string isotope, especially patterns like .isotope( or new Isotope(, often reveals the initialization with its itemSelector and layoutMode options.

Inline transform styles on grid items. Because Isotope positions items with absolute coordinates and CSS transforms, the items inside a grid carry inline styles such as style="position: absolute; left: 0px; top: 0px; transform: translate3d(...)". A container of equally classed children that all have absolute positioning and translate transforms is highly characteristic of Isotope (or its sibling Masonry).

JavaScript global. When the standalone library is loaded, it exposes an Isotope global. Typing Isotope (or, for the jQuery plugin, checking jQuery.fn.isotope) into the DevTools Console and getting a defined value back confirms the library is present.

Method	What to do	What Isotope reveals
View Source	Right-click, "View Page Source"	isotope.pkgd.min.js/isotope.min.js, inline .isotope( calls, CDN URLs
Browser DevTools	Inspect grid items and the Network tab	Absolute-positioned items with transform: translate, requests for the isotope script
DevTools Console	Type Isotope or check jQuery.fn.isotope	A defined object/function confirms the library is loaded
curl -I / curl -s	`curl -s https://example.com	grep -i isotope`
Wappalyzer	Run the extension on the live page	Identifies "Isotope" under JavaScript libraries

A fast terminal check is curl -s https://example.com | grep -i "isotope". If that returns a script reference or an initialization call, the site is almost certainly using Isotope. For the broader methodology of cataloging a page's scripts, see our guides on how to check what javascript libraries a website uses and how to find out what technology a website uses.

A few caveats make detection more robust. Because Isotope is frequently bundled into a theme's combined JavaScript file, the literal filename isotope may be hidden inside a minified bundle named something generic. In that case the DOM artifacts become the best evidence: a grid whose children are all absolutely positioned with translate transforms, combined with visible filter buttons that carry data-filter attributes, strongly implies Isotope even when the script name is obscured. It is also worth distinguishing Isotope from plain Masonry, since both produce transform-positioned grids; the presence of filtering and sorting controls, or an inline call referencing filter/sortBy, points specifically to Isotope. Combining the script reference, the inline initialization, and the characteristic DOM styling yields a confident verdict, and pulling the raw server response makes those signals easy to read without the browser rewriting the DOM.

Key Features

• Filtering. Show and hide items by category using a selector or a custom function, with smooth animated transitions between states.
• Sorting. Reorder items by one or more values read from each element, ascending or descending, reusing the same transition system.
• Multiple layout modes. Masonry, fitRows, vertical, and custom layout modes cover most grid arrangements out of the box.
• Responsive reflow. Automatic re-layout on window resize so the grid adapts to any viewport width.
• Dynamic content methods. Append, prepend, remove, and re-layout items at runtime, ideal for "load more" and infinite-scroll patterns.
• imagesLoaded integration. Pairs with Metafizzy's imagesLoaded so grids re-measure after images finish downloading.
• jQuery and vanilla usage. Works as a jQuery plugin or as a standalone constructor, fitting both legacy and modern stacks.

Pros and Cons

Pros

• Turns a plain grid into an interactive, filterable, sortable showcase with very little code.
• Smooth, hardware-accelerated transitions thanks to transform-based positioning.
• Mature and battle-tested, with a long track record across portfolios and galleries.
• Flexible layout modes and a clean API for adding or removing items dynamically.

Cons

• Commercial use requires a paid license; it is free only for open-source and personal projects under GPL.
• Absolute positioning removes items from normal flow, which can complicate certain responsive or accessibility requirements.
• Layout depends on accurate measurements, so grids with unloaded images need imagesLoaded to avoid overlap.
• For very large item counts, continuous re-layout and animation can become performance-sensitive.

Isotope vs Alternatives

Isotope sits among a family of layout and grid tools, several from the same author. The table clarifies where it fits.

Library	Core job	Filtering/sorting	Typical use
Isotope	Filterable, sortable animated grids	Yes, built in	Portfolios and galleries with interactive filters
Masonry	Cascading gap-free layout only	No	Static masonry grids without interaction
Packery	Bin-packing draggable layouts	No (drag focus)	Draggable, gap-filling grids and dashboards
MixItUp	Filter and sort animated grids	Yes, built in	A direct Isotope alternative with a different license model
CSS Grid / Flexbox	Native browser layout	No (manual)	Layouts that need no animation or JS-driven filtering

If you find a site uses a sibling Metafizzy library instead, the same fingerprinting approach applies; the most closely related is the foundational jQuery layer that the classic Isotope plugin builds on, which frequently appears alongside it in older stacks. The defining distinction within the family is interaction: Masonry places, while Isotope places and lets users rearrange.

Use Cases

Isotope is the natural choice when a site needs an interactive, filterable collection of visual items. Creative agencies and freelancers use it for portfolio grids where visitors can filter projects by discipline, such as branding, web, or photography, and watch the grid re-flow. Photographers and designers use its masonry mode to present images of varying dimensions in a tight, attractive cascade.

It also fits product and listing pages where users filter a catalog by attribute, real-estate and directory sites arranging cards by type or price, news and blog landing pages that group posts by topic, and "load more" patterns where new items are appended and the grid rearranges smoothly. For technology and market research, detecting Isotope typically signals a design-led, portfolio-style site, often built on a custom theme or a creative WordPress template, which is useful context when profiling agencies and studios.

Consider a few concrete adopters. A design studio might run its case-study page on Isotope so prospective clients can filter work by industry and see only the relevant projects. A photography portfolio might use the masonry layout to fit landscape and portrait shots into one seamless grid that reflows responsively. An ecommerce-adjacent lookbook might let shoppers filter a grid of styled product images by collection. In each case the common thread is a desire for an attractive, interactive grid that responds instantly to user choices without a full page reload.

From a competitive-intelligence standpoint, spotting Isotope on a domain is a meaningful data point. It suggests a site that values visual presentation and interactivity, frequently maintained by a designer or agency rather than assembled from a generic template. For vendors selling to creative teams, or analysts mapping which sites invest in polished front-end experiences, that is useful qualifying context, and the broader practice of using tech-stack data to qualify leads explains how such signals feed prospecting. Surfacing the library automatically across many domains is exactly the kind of insight a technology-detection tool is designed to deliver.

Frequently Asked Questions

Is Isotope free to use?

Isotope is free for open-source projects under the GPL v3 license and for personal, non-commercial use. Commercial projects require a paid Metafizzy license. This dual-licensing model is the same one used across Metafizzy's libraries. Practically, you can experiment with Isotope freely, but a business shipping it on a commercial website is expected to purchase a license, which is an important consideration when choosing it over a permissively licensed alternative.

What is the difference between Isotope and Masonry?

Masonry is a layout-only library that arranges items of varying heights into a tight, cascading grid. Isotope includes masonry as one of its layout modes but adds filtering, sorting, and animated transitions between arrangements. If you only need a static cascading grid, Masonry is sufficient; if you need users to filter or sort the grid interactively, Isotope is the tool. Both position items with absolute coordinates and transforms, which is why their DOM fingerprints look similar.

How do I tell if a grid is built with Isotope?

Check the page source for a script named isotope.pkgd.min.js or isotope.min.js, an inline call like .isotope( or new Isotope(, or a CDN URL referencing isotope-layout. In DevTools, inspect the grid items: Isotope positions them with position: absolute and transform: translate(...) inline styles. The presence of data-filter buttons alongside such a grid further confirms it. A quick curl -s URL | grep -i isotope works from any terminal.

Why do Isotope items have inline transform styles?

Isotope positions each item using absolute coordinates and CSS transform: translate(...) rather than the normal document flow. This lets the library animate items smoothly from one arrangement to another by transitioning the transform when a user filters or sorts. Those inline position: absolute and transform styles on every grid child are a deliberate consequence of the design and one of the most recognizable signs that Isotope (or its sibling Masonry) is in use.

Does Isotope require jQuery?

Not anymore. The classic, widely deployed version of Isotope was a jQuery plugin, which is why you still see $('.grid').isotope(...) across many sites. The modern standalone library works without jQuery, constructed as new Isotope(element, options), and exposes a global Isotope object. On older or theme-based sites you will usually find jQuery loaded alongside Isotope; on newer custom builds the vanilla form is common.

Want to detect Isotope and the rest of a site's technology stack instantly? Run any URL through StackOptic at https://stackoptic.com.