bricks.js

layout ui-component responsive

bricks.js is a blazing fast masonry layout generator for fixed width elements. The library allows you to arrange elements of varying sizes into a grid format, and automatically adjusts the layout as elements are dynamically added or altered.

Latest Ver 1.8.0

Homepage

Github

4,678

Build with blocks, craft your stage.

Easily and quickly structure your website with bricks.js.

bricks.js is a JavaScript library that enables neat alignment of elements of various sizes on a web page.

CDN Download

License: MIT

Asset Type :

View All Versions

https://cdnjs.cloudflare.com/ajax/libs/bricks.js/1.8.0/bricks.js

https://cdnjs.cloudflare.com/ajax/libs/bricks.js/1.8.0/bricks.min.js

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 HTML
<div id="container"></div><script src="path_to_bricks.js"></script><script>var instance = bricks({container: '#container',packed: 'data-packed',sizes: [{columns: 3,gutter: 10}]});instance.pack();</script>

🧩 External JS
<script src="path_to_bricks.js"></script>

⚙️ JavaScript
var instance = bricks({container: '#container',packed: 'data-packed',sizes: [{columns: 3,gutter: 10}]});instance.pack();