masonry README

The project's README from github.com/desandro/masonry. As one markdown file: README.md.

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/masonry-layout@4/dist/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/masonry-layout@4/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

masonry (desandro/masonry)

Searching Database…

16.7K ·GitHub
Masonry
What is this?Masonry is a JavaScript grid layout library. It places elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.
How does a Masonry layout actually arrange items?It cascades: each element is placed in the optimal spot based on the vertical space available, so items of different heights pack together like stones in a wall instead of sitting in strict rows.
How do I add it to my site?Install it with npm (npm install masonry-layout --save) or Bower, link the files directly from the unpkg CDN, or download masonry.pkgd.min.js and include it in your page.
Do I have to use jQuery with it?No. You can initialize Masonry with jQuery, with plain vanilla JavaScript, or without any script at all by adding a data-masonry attribute to an element.
Is it free to use, even commercially?Yes, Masonry is released under the MIT license. The author only asks that you consider purchasing a license for one of Metafizzy's commercial libraries to support its development.
Can I set layout options without writing JavaScript?Yes. Add a data-masonry attribute to your element and put the options in the attribute value as JSON — no init script required.
Is the project still actively developed?Yes. The README notes Masonry has been actively maintained and improved upon for 8 years, with 900 GitHub issues closed.
Where can I see demos and the full documentation?On the official site masonry.desandro.com, which has complete docs and demos.
What are similar projects?isotope, tui.editor, jquery-ui, velocity, typeahead.js, dragula, jquery, jquery-pjax
Which topics is it in?jquery-plugin, grid, layout, jquery, vanilla-javascript, dom, javascript-library, browser, html, plugin, ui, web-development
Creator
desandro
Size
1.4 MB
Stars
16.7K
Updated
CommitJul 04Releasev4.2.2Jul 04
Age
16y
Commits · 90 Days