A JavaScript library for creating filterable, sortable, and responsive grid layouts with masonry, packery, and other layouts.
Isotope is a JavaScript library for creating dynamic, filterable, and sortable grid layouts on the web. It solves the problem of displaying collections of items in an interactive, visually appealing way, such as in portfolios, galleries, or product grids, by enabling smooth filtering, sorting, and layout adjustments.
Frontend developers and web designers building interactive galleries, portfolios, product listings, or any grid-based content that requires filtering and sorting capabilities.
Developers choose Isotope for its simplicity, performance, and flexibility in creating magical layouts with minimal code, supported by multiple initialization methods and a range of layout modes like masonry and packery.
:revolving_hearts: Filter & sort magical layouts
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Can be set up with jQuery, vanilla JavaScript, or HTML data attributes, as shown in the README with code examples for each approach.
Supports masonry, packery, fitRows, and vertical layouts, enabling creative grid arrangements beyond basic CSS grids.
Filtering and sorting include transitions for a polished user experience, reducing the need for custom animation code.
Layouts automatically adapt to screen sizes, making it suitable for mobile-first designs without extra configuration.
For proprietary projects, a paid license is necessary, adding cost and complexity compared to fully open-source libraries.
As a standalone library, it lacks native support for modern frameworks like React or Vue, requiring wrappers or custom implementations.
Handles layout logic but doesn't provide CSS styles, so developers must invest time in custom styling for visual design.