Isotope

  1. Filtering
  2. Sorting
  3. Layout
  4. Layout modes
  5. Options
  6. Methods
  7. Events
  8. Extras
  9. License
  10. FAQ

Layout

Item sizing

All sizing and styling of items is handled by your own CSS.

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

.grid-item {
  float: left;
  width: 50px;
  height: 50px;
  background: #e6e5e4;
  border: 2px solid #b6b5b4;
}

.grid-item--width2 { width: 100px; }
.grid-item--height2 { height: 100px; }

Edit this demo on CodePen

Responsive layouts

Item sizes can be set with percentages for responsive layouts. With the masonry layout mode, set percentage-width columnWidth with element sizing. Set percentPosition: true so item positions are likewise set with percentages to reduce adjustment transitions on window resize.

<div class="grid">
  <!-- width of .grid-sizer used for columnWidth -->
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns */
.grid-item--width2 { width: 40%; }

$('.grid').isotope({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    // use element for option
    columnWidth: '.grid-sizer'
  }
})

Edit this demo on CodePen

imagesLoaded

Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue.

Initialize Isotope, then trigger layout after each image loads.

// init Isotope
var $grid = $('.grid').isotope({
  // options...
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});

Edit this demo or vanilla JS demo on CodePen

Or, initialize Isotope after all images have been loaded.

var $grid = $('.grid').imagesLoaded( function() {
  // init Isotope after all images have loaded
  $grid.isotope({
    // options...
  });
});

Edit this demo or vanilla JS demo on CodePen