jQuery or Vanilla Isotope

• GitHub
• Default layout mode is Masonry and uses the same options

Simple

• .ll-grid .ll-grid-sizer for sizing only
• Each item has CSS width:25% :: .ll-grid .ll-grid-item img.img-fluid

Filter

• OR $grid.isotope({ filter: '.alkali, .alkaline-earth' });
• AND $grid.isotope({ filter: '.metal.transition' });
• If jQuery, this is possible: $grid.isotope({ filter: '.metal:not(.transition)' });

Layout Mode

• Built in layout modes: masonry (default), fitRows, vertical

Masonry Mode

• Horizontal order is not guaranteed to work
• If columnWidth option is not set, it's set the first item's width. If it is set, it has to be set to a fixed number representing number of pixels. Percentage cannot be set

fitRows Mode, vertical Mode

fitColumns Mode

• Install separately
• Works great when items have the same fixed width
• More Docs

Packery Mode

• Install separately
• Free for Open source but require license for commercial projects
• Same as Masonry and it provides Masonry during draggable interactions!
• More Docs

cellsByRow Mode

• Install separately
• If rowHeight is not set, it will take the first item's height
• More Docs