Download
Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. All sizing and styling of items is handled by your own CSS. tem sizes can be set with percentages for responsive layouts. With the masonry layout mode, set percentage-width columnWidth with element sizing. Set percentPosition: true so item positions are likewise set with percentages to reduce adjustment transitions on window resize. Unloaded images can throw off Masonry layouts and cause item elements to overlap. imagesLoaded resolves this issue. imagesLoaded is a separate script you can download at imagesloaded.desandro.com. Or, initialize Masonry after all images have been loaded.
Features
- Use element sizing for responsive layouts with percentage widths
- Element sizing options allow you to control the sizing of the Masonry layout
- Add horizontal space between item elements
- Set item positions in percent values, rather than pixel values
- Masonry will layout items below stamped elements
- Set the width of the container to fit the available number of columns
Project Samples
