https://github.com/taufik-nurrohman/bricks

Tiny JavaScript grid layout to mimic http://masonry.desandro.com
https://github.com/taufik-nurrohman/bricks

brick float grid javascript js layout lightweight masonry

Last synced: about 1 year ago
JSON representation

Tiny JavaScript grid layout to mimic http://masonry.desandro.com

• Host: GitHub
• URL: https://github.com/taufik-nurrohman/bricks
• Owner: taufik-nurrohman
• License: mit
• Created: 2016-07-09T01:32:38.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2018-10-30T08:10:05.000Z (over 7 years ago)
• Last Synced: 2025-04-24T01:12:11.985Z (about 1 year ago)
• Topics: brick, float, grid, javascript, js, layout, lightweight, masonry
• Language: HTML
• Homepage: https://taufik-nurrohman.js.org/bricks/bricks.html
• Size: 13.7 KB
• Stars: 9
• Watchers: 1
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
Bricks

======

> Tiny grid layout plugin.

[![View Demo](https://3.bp.blogspot.com/-8FcU5n_DDao/V4CKBCr3z8I/AAAAAAAAIxU/0tTsnS1sQq0G4JBY1DVIbI5ZrVJrm3MUgCLcB/s1600/bricks.png)](//tovic.github.io/bricks/bricks.html "View Demo")

Usage

-----

### HTML

~~~ .html



  


  


  


  


  


  


  




~~~


### CSS

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

~~~ .js

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.