bricks

Bricks

Tiny grid layout plugin.

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.

This site is open source. Improve this page.