Masonry

🏩 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
Cssgridgenerator4,577
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
Readme

Masonry

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 masonry.desandro.com for complete docs and demos.

Install

Download

CDN

Link directly to Masonry files on unpkg.

<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/[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.

Initialize

With jQuery

$('.grid').masonry({
  // 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...
});

With HTML

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>
  ...
</div>

License

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.
Html
Layout
Grid
Masonry
Grid Layout