HTML JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE
README.md
bricks.css
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.