masonry-layout
Advanced tools
Package description
The masonry-layout npm package is a JavaScript library for creating dynamic, grid-based layouts. It arranges elements vertically, positioning each element in the next open spot in the grid, much like a mason fitting stones in a wall. This layout is often used for image galleries, portfolios, and other content-heavy websites.
Basic Grid Layout
This feature allows you to create a basic grid layout. The code initializes a Masonry instance on a container element with the class 'grid' and specifies the item selector and column width.
const Masonry = require('masonry-layout');
const grid = document.querySelector('.grid');
const msnry = new Masonry(grid, {
itemSelector: '.grid-item',
columnWidth: 200
});Responsive Layout
This feature enables a responsive layout. The code uses a grid-sizer element to define column width and sets percentPosition to true for percentage-based positioning.
const Masonry = require('masonry-layout');
const grid = document.querySelector('.grid');
const msnry = new Masonry(grid, {
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});Adding Items Dynamically
This feature allows you to add items dynamically to the grid. The code creates a new grid item, appends it to the grid, and then informs Masonry about the new item using the appended method.
const Masonry = require('masonry-layout');
const grid = document.querySelector('.grid');
const msnry = new Masonry(grid, {
itemSelector: '.grid-item',
columnWidth: 200
});
const newItem = document.createElement('div');
newItem.className = 'grid-item';
grid.appendChild(newItem);
msnry.appended(newItem);Isotope is a JavaScript library for creating dynamic, filterable, and sortable grid layouts. It offers more advanced features compared to masonry-layout, such as filtering and sorting of grid items. It is also more customizable and has a larger community and more extensive documentation.
Packery is another grid layout library that offers a more flexible and customizable layout compared to masonry-layout. It allows for draggable and resizable grid items, making it suitable for more interactive and complex layouts.
Muuri is a versatile grid layout library that combines the features of Masonry, Packery, and Isotope. It offers drag-and-drop, filtering, sorting, and responsive layouts. Muuri is highly customizable and provides a comprehensive API for advanced use cases.
Readme
Cascading grid layout library
Masonry 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.
See masonry.desandro.com for complete docs and demos.
Link directly to Masonry files on unpkg.
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
npm: npm install masonry-layout --save
Bower: bower install masonry-layout --save
Masonry has been actively maintained and improved upon for 8 years, with 900 GitHub issues closed. Please consider supporting its development by purchasing a license for one of Metafizzy's commercial libraries.
With jQuery
$('.grid').masonry({
// options...
itemSelector: '.grid-item',
columnWidth: 200
});
With vanilla JavaScript
// vanilla JS
// init with element
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
// options...
itemSelector: '.grid-item',
columnWidth: 200
});
// init with selector
var msnry = new Masonry( '.grid', {
// options...
});
With HTML
Add a data-masonry attribute to your element. Options can be set in JSON in the value.
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
<div class="grid-item"></div>
<div class="grid-item"></div>
...
</div>
Masonry is released under the MIT license. Have at it.
Made by David DeSandro
FAQs
Cascading grid layout library
The npm package masonry-layout receives a total of 176,850 weekly downloads. As such, masonry-layout popularity was classified as popular.
We found that masonry-layout demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.