Install

Download

• isotope.pkgd.js un-minified, or
• isotope.pkgd.min.js minified

CDN

Link directly to Isotope files on cdnjs.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.js"></script>
<!-- or -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>

Package managers

Install with Bower: bower install isotope --save

Install with npm: npm install isotope-layout

License

Commercial license

If you want to use Isotope to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Read more about Isotope commercial licensing.

Once purchased, you’ll receive a commercial license PDF and be all set to use Isotope in your commercial applications.

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Isotope under the terms of the GPLv3. Read more about Isotope open source licensing.

Getting started

HTML

Include the Isotope .js file in your site.

<script src="/path/to/isotope.pkgd.min.js"></script>

Isotope works on a container element with a group of similar child items.

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

CSS

All sizing of items is handled by your CSS.

.grid-item { width: 25%; }
.grid-item--width2 { width: 50%; }

Initialize with jQuery

You can use Isotope as a jQuery plugin: $('selector').isotope().

$('.grid').isotope({
  // options
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

Initialize with Vanilla JavaScript

You can use Isotope with vanilla JS: new Isotope( elem, options ). The Isotope() constructor accepts two arguments: the container element and an options object.

var elem = document.querySelector('.grid');
var iso = new Isotope( elem, {
  // options
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

// element argument can be a selector string
//   for an individual element
var iso = new Isotope( '.grid', {
  // options
});

Initialize in HTML

You can initialize Isotope in HTML, without writing any JavaScript. Add js-isotope to the class of the container element. Options can be set with a data-isotope-options attribute.

<div class="grid js-isotope"
  data-isotope-options='{ "itemSelector": ".item", "layoutMode": "fitRows" }'>

Next

Learn more about how to use Isotope:

• Filtering
• Sorting
• Layout

v1

Isotope is currently v2. See isotope.metafizzy.co/v1 for documentation and resources for previous v1 version.

Isotope in use

Justin Bieber, Tyler Perry, Colonel Sanders: they all have used Isotope.

Are you using Isotope? Tweet @metafizzyco or email yo@metafizzy.co to share your work and possibly get it featured here.

TylerPerry.com

New York Times

Rimmel London

BBC - Flight Risk

Whole Foods Market

Merrill Lynch

Gallup

Patchwork

1407 Broadway

Smithsonian

Explore KC

Design Inspiration / Bench.li

Gimmick Book

Create the Bridge

Northlich

You and Who

Biodroid

Ortega Graphics

Twitter updates from @metafizzyco

Tweets about Isotope