🏩 Cascading grid layout plugin
Alternatives To Masonry
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Masonry15,4771,9991862 years ago13July 04, 201850HTML
:love_hotel: Cascading grid layout plugin
Dashboards10,892212 years ago4April 08, 20192mitHTML
Responsive dashboard templates 📊✨
Muuri10,3632218a month ago22July 09, 2021100mitJavaScript
Infinite responsive, sortable, filterable and draggable layouts
Rebass7,8907442824 months ago109October 28, 201996mitJavaScript
:atom_symbol: React primitive UI components built with styled-system.
Vue Grid Layout6,3831041543 days ago42August 03, 2022224mitJavaScript
A draggable and resizable grid layout, for Vue.js.
Flex Layout5,9175,089934a month ago41June 30, 202250mitTypeScript
Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API
Split5,6302481323 months ago43January 07, 2022158mitJavaScript
Unopinionated utilities for resizeable split views
Twoway View5,299
896 years ago5October 30, 2014168Java
[DEPRECATED] RecyclerView made simple
3 months ago39mitVue
🧮 Generate basic CSS Grid code to make dynamic layouts!
Awesome Styled Components3,149
4 months ago9
A curated list of awesome styled-components resources 💅
Alternatives To Masonry
Select To Compare

Alternative Project Comparisons


Cascading grid layout library

Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

See for complete docs and demos.




Link directly to Masonry files on unpkg.

<script src="[email protected]/dist/masonry.pkgd.js"></script>
<!-- or -->
<script src="[email protected]/dist/masonry.pkgd.min.js"></script>

Package managers

npm: npm install masonry-layout --save

Bower: bower install masonry-layout --save

Support Masonry development

Masonry has been actively maintained and improved upon for 8 years, with 900 GitHub issues closed. Please consider supporting its development by purchasing a license for one of Metafizzy's commercial libraries.


With jQuery

  // options...
  itemSelector: '.grid-item',
  columnWidth: 200

With vanilla JavaScript

// vanilla JS
// init with element
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200

// init with selector
var msnry = new Masonry( '.grid', {
  // options...


Add a data-masonry attribute to your element. Options can be set in JSON in the value.

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
  <div class="grid-item"></div>
  <div class="grid-item"></div>


Masonry is released under the MIT license. Have at it.

Made by David DeSandro

Popular Layout Projects
Popular Grid Projects
Popular User Interface Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Grid Layout