Create Fast Masonry Grid Layouts with Bricks.js
It’s always been pretty simple to create grids with jQuery, using plugins and free tutorials from developers.
However, masonry grids are tougher to build, since they don’t fit evenly across the page. You’ll have fixed-size widths for columns but the item heights can vary wildly.
To make a pixel-perfect masonry grid you need a plugin such as Bricks.js.
This plugin is totally open-source and ridiculously fast. It’ll render the grid in less than half a second, even with dozens of items on the page.
Most people recognize masonry grids from Pinterest since they popularized the layout. But, it has since grown to be used in many other websites, too.
Read Also: Grid.css – A Minimal Grid System for Web Developers
To get started with Bricks.js, you’ll need some content and a default page layout. You install the plugin right from npm or through GitHub if that’s easier.
With the initial setup, you pass three specific parameters:
- Container – a DOM container element for the grid
- Packed – an attribute that determines how the items flow in the grid
- Sizes – an array of widths and gutters, defined in pixels
The plugin uses all these values to automate the masonry grid from scratch.
And, you can even use it for infinite loading if you want masonry grids that work just like Pinterest.
Check out the demo page for an interactive grid that you can alter for testing. You define the total number of elements and it’ll automate the process while displaying the total rendering time.
For example, I tested a grid with 500 elements and it only took 13 milliseconds to complete. This doesn’t factor in the time for all 500 images to load, but 13 ms for an auto-generated grid is very impressive.
Get started yourself by downloading the files from GitHub and following the install instructions. This may feel confusing at first but the more you toy with it the easier it is to set up.