Install
A packaged source file includes everything you need to use Isotope.
- isotope.pkgd.min.js for production
- isotope.pkgd.js for development
Commercial licensing
Isotope may be used in commercial projects and applications with the one-time purchase of a commercial license. Read more about Isotope commercial licensing.
Buy Developer License $25 Buy Organization License $90
Purchasing accepts most credit cards and takes seconds. Once purchased, you’ll receive a commercial license PDF and you will be all set to use Isotope in your commercial applications.
For non-commercial, personal, or open source projects and applications, you may use Isotope under the terms of the GPL v3 License. You may use Isotope for free.
Purchase with PayPal
Getting started
HTML
Isotope works on a container element with a group of similar child items.
<div id="container">
<div class="item">...</div>
<div class="item w2">...</div>
<div class="item">...</div>
...
</div>Include the Isotope script in your site.
<script src="/path/to/isotope.pkgd.min.js"></script>CSS
All sizing of items is handled by your CSS.
.item { width: 25%; }
.item.w2 { width: 50%; }Initialize with JavaScript
Initialize an Isotope instance as a jQuery plugin: $('#container').isotope().
var $container = $('#container');
// init
$container.isotope({
// options
itemSelector: '.item',
layoutMode: 'fitRows'
});There are a number of options you can specify. Within the options is where you can filter items, sort items, or set the layout mode.
That’s it! Now let’s do some fun stuff with options and methods.
Vanilla JavaScript
jQuery is not required to use Isotope. Given its popularity, jQuery will be used for all example code in these docs. But you can still use Isotope with vanilla JS.
Initialize an Isotope instance with new Isotope( element, options ). The Isotope constructor accepts two arguments: the container element and an options object.
var container = document.querySelector('#container');
// init
var iso = new Isotope( container, {
// options
itemSelector: '.item',
layoutMode: 'fitRows'
});The element can be a selector string for a single element.
var iso = new Isotope( '#container', {
// options
});Initialize in HTML
You can initialize Isotope in HTML, without writing any JavaScript. Simply add js-isotope to the class of the container element. Options can be set with a data-isotope-options attribute.
<div id="container" class="js-isotope"
data-isotope-options='{ "columnWidth": 200, "itemSelector": ".item" }'>Options set in HTML must be valid JSON. Keys need to be quoted, for example "itemSelector":. Note that the attribute value uses single quotes ', but the JSON entities use double-quotes ".