[Isotope](.)
============
1. [Filtering](/filtering)
2. [Sorting](/sorting)
3. [Layout](/layout)
4. [Layout modes](/layout-modes)
* [masonry](/layout-modes/masonry)
* [fitRows](/layout-modes/fitrows)
* [vertical](/layout-modes/vertical)
* [packery](/layout-modes/packery)
* [cellsByRow](/layout-modes/cellsbyrow)
* [masonryHorizontal](/layout-modes/masonryhorizontal)
* [fitColumns](/layout-modes/fitcolumns)
* [cellsByColumn](/layout-modes/cellsbycolumn)
* [horiz](/layout-modes/horiz)
5. [Options](/options)
6. [Methods](/methods)
7. [Events](/events)
8. [Extras](/extras)
9. [License](/license)
10. [FAQ](/faq)
* [Install](#install)
* [Download](#download)
* [CDN](#cdn)
* [Package managers](#package-managers)
* [License](#license)
* [Commercial license](#commercial-license)
* [Open source license](#open-source-license)
* [Getting started](#getting-started)
* [HTML](#html)
* [CSS](#css)
* [Initialize with jQuery](#initialize-with-jquery)
* [Initialize with Vanilla JavaScript](#initialize-with-vanilla-javascript)
* [Initialize in HTML](#initialize-in-html)
* [Next](#next)
* [Isotope in use](#isotope-in-use)
* [People like Isotope](#people-like-isotope)
Isotope
=======
Filter & sort magical layouts
[Isotope on GitHub 11,095](https://github.com/metafizzy/isotope)
[Download **isotope.pkgd.min.js**](https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js)
[Download **these docs**](isotope-docs.zip)
### Filter
show all metal transition –ium
### Sort
original order name symbol number
$grid.isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
...
})
##### Mercury
Hg
80
200.59
##### Tellurium
Te
52
127.6
##### Bismuth
Bi
83
208.980
##### Lead
Pb
82
207.2
##### Gold
Au
79
196.967
##### Potassium
K
19
39.0983
##### Sodium
Na
11
22.99
##### Cadmium
Cd
48
112.411
##### Calcium
Ca
20
40.078
##### Rhenium
Re
75
186.207
##### Thallium
Tl
81
204.383
##### Antimony
Sb
51
121.76
##### Cobalt
Co
27
58.933
##### Ytterbium
Yb
70
173.054
##### Argon
Ar
18
39.948
##### Nitrogen
N
7
14.007
##### Uranium
U
92
238.029
##### Plutonium
Pu
94
(244)
[Edit this demo on CodePen](https://codepen.io/desandro/pen/nFrte)
Install
-------
### Download
* [isotope.pkgd.js](https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js) un-minified, or
* [isotope.pkgd.min.js](https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js) minified
### CDN
Link directly to [unpkg](https://unpkg.com).
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
### Package managers
[Install with npm](https://www.npmjs.com/package/isotope-layout): `npm install isotope-layout`
Install with Bower: `bower install isotope-layout --save`
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](/license).
Once purchased, you’ll receive a commercial license PDF and be all set to use Isotope in your commercial applications.
[Isotope Commercial Developer License for 1 developer $25](https://gum.co/isotope-dev) [Isotope Commercial Team License for up to 8 developers $110](https://gum.co/isotope-team) [Isotope Commercial Organization License for Unlimited developers $320](https://gum.co/isotope-org)
### Open source license
If you are creating an open source application under a license compatible with the [GNU GPL license v3](https://www.gnu.org/licenses/gpl-3.0.html), you may use Isotope under the terms of the GPLv3. [Read more about Isotope open source licensing](/license).
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 `data-isotope` attribute to the container element. [Options](/options) can be set in its value.
<div class="grid" data-isotope='{ "itemSelector": ".grid-item", "layoutMode": "fitRows" }'>
Options set in HTML must be valid JSON. Keys need to be quoted, for example `"itemSelector":`. Note the HTML attribute `data-isotope` is set with single quotes `'`, but JSON entities use double-quotes `"`.
Next
----
Learn more about how to use Isotope:
* [Filtering](/filtering)
* [Sorting](/sorting)
* [Layout](/layout)
Isotope in use
--------------
Justin Bieber, [Tyler Perry](http://www.tylerperry.com/entertainment/), [Colonel Sanders](http://colonelsanders.com): they all have used Isotope.
Are you using Isotope? Tweet [@metafizzyco](https://twitter.com/metafizzyco) or email [[email protected]](mailto:[email protected]) to share your work and possibly get it featured here.
[
Malika Favre
](http://malikafavre.com/)[
Comedy Central
](http://www.cc.com/shows/broad-city)[
New York Times
](http://www.nytimes.com/interactive/2012/12/24/sports/basketball/pick-your-all-time-new-york-city-nba-team.html)[
Kia
](http://www.kia.ca/all-vehicles)[
BBC - Flight Risk
](http://www.bbc.com/future/bespoke/20140724-flight-risk/)[
USA Rugby
](https://www.usa.rugby/mens-eagles/players/)[
Whole Foods Market
](http://www.wholefoodsmarket.com/)[
Merrill Lynch
](https://www.ml.com/financial-goals-and-priorities/home.html)[
Patchwork
](http://patchwork.stylehatch.co/)[
Design Inspiration / Bench.li
](http://bench.li/)
People like Isotope
-------------------
[People like Isotope - Curated tweets by metafizzyco](https://twitter.com/metafizzyco/timelines/719923562660917248?ref_src=twsrc%5Etfw)