Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

masonry-layout

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

masonry-layout

Cascading grid layout library

  • 3.2.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
38K
decreased by-79.12%
Maintainers
1
Weekly downloads
 
Created

What is masonry-layout?

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.

What are masonry-layout's main functionalities?

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);

Other packages similar to masonry-layout

Keywords

FAQs

Package last updated on 21 Nov 2014

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc