Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Cascading grid layout library
JavaScript HTML CSS

Update Outlayer v1.4.1; Add jQuery events

+ tick version 3.3.1
+ Safari layout and transition fixes; Fixes #698
+ add fluid sandbox
+ README cdnjs; link to raw github; complete Initialize
latest commit 1e9d69774f
@desandro authored

README.mdown

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 cdnjs.

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>

Package managers

Bower: bower install masonry --save

npm: npm install masonry-layout --save

Initialize

With jQuery

$('.grid').masonry({
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});

With vanilla JavaScript

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

With HTML

Add a class of js-masonry to your element. Options can be set in JSON in data-masonry-options.

<div class="grid js-masonry"
  data-masonry-options='{ "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.


Copyright 2015 David DeSandro

Something went wrong with that request. Please try again.