Tiny JavaScript grid layout to mimic http://masonry.desandro.com
HTML JavaScript CSS
Latest commit a34878a Dec 17, 2016 @tovic Updates
Permalink
Failed to load latest commit information.
LICENSE
README.md
bricks.css Add `height` to Transition Property Jul 9, 2016
bricks.destroy.html
bricks.html
bricks.js
bricks.min.css
bricks.min.js
bricks.png
bricks.walls.html

README.md

Bricks

Tiny grid layout plugin.

View Demo

Usage

HTML

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#container {
  padding: 0 0 5px 5px;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}

#container > div {
  width: 100px;
  float: left;
  margin: 5px 5px 0 0;
}

JavaScript

var gap = 5; // same as `#container div` margin
var pad = 5; // same as `#container` padding
bricks('container', gap, pad);

Limitation

  • Can’t handle bricks with different width.