callmecavs/bricks.js

Bricks.js is a JavaScript library that arranges items on a webpage in a masonry layout, the kind of grid where cards or images stack tightly together with no awkward gaps, even when each item is a different height. Think of a Pinterest-style feed where images slot into columns like bricks filling a wall. That is what this library handles automatically. To use it, you install it via NPM and create an instance by pointing it at the container element that holds your grid items. You tell it how many columns to use at different screen widths, how much spacing to leave between items, and which HTML attribute it should stamp on each item once it has been placed. From there, the library positions everything and keeps the layout correct as the browser window resizes. The library exposes three main methods. The pack method arranges all items in the container from scratch. The update method only touches items that have not been positioned yet, which is useful when new cards are loaded dynamically and you do not want to rearrange everything that is already in place. The resize method adds or removes a listener that watches for window size changes and repacks the grid when the user crosses a breakpoint. By default, items are placed using the top and left CSS properties. There is an option to use CSS transforms instead, which allows you to add a CSS transition and animate items smoothly into their positions when the grid is first built or updated. Browser support covers Chrome, Firefox, Safari, Opera, and Internet Explorer 10 and above, as well as mobile browsers on iOS and Android. The library does not bundle polyfills, so projects targeting older browsers need to supply their own. The README links to a community-maintained list of polyfills for the browser features Bricks depends on.