# desandro/masonry

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/desandro-masonry).**

16,709 stars · 2,076 forks · HTML

## Links

- GitHub: https://github.com/desandro/masonry
- Homepage: https://masonry.desandro.com
- awesome-repositories: https://awesome-repositories.com/repository/desandro-masonry.md

## Description

Masonry is a JavaScript library for arranging elements of varying heights into a grid without vertical gaps. It serves as a DOM element positioner and dynamic layout manager that calculates and applies absolute coordinates to HTML elements based on available vertical space.

The system functions as a responsive grid engine using percentage-based widths to maintain consistent structures across different screen sizes. It includes capabilities to recalculate grid positions after images load or browser windows resize to prevent element overlap.

The library covers grid management and positioning, including the ability to reserve static space and preserve horizontal order. It also provides layout transition utilities for moving items into place using staggered animations and event listeners to trigger functions during layout changes.

## Tags

### User Interface & Experience

- [Cascading Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/cascading-grid-layouts.md) — Positions elements of varying heights to eliminate vertical gaps using custom column widths and gutters. ([source](https://cdn.jsdelivr.net/gh/desandro/masonry@master/README.md))
- [Fluid Percentage Grids](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/windowed-grids/fluid-percentage-grids.md) — Provides a layout system using relative percentage widths to automatically resize the grid based on the browser window. ([source](https://masonry.desandro.com/layout))
- [Cascading Grid Libraries](https://awesome-repositories.com/f/user-interface-experience/cascading-grid-libraries.md) — Provides a specialized framework for arranging elements of varying heights into a gapless grid.
- [Coordinate-Based Position Calculators](https://awesome-repositories.com/f/user-interface-experience/coordinate-based-position-calculators.md) — Calculates spatial coordinates for element insertion relative to other components to eliminate vertical gaps. ([source](https://masonry.desandro.com/methods))
- [Content-Driven Layout Refresh](https://awesome-repositories.com/f/user-interface-experience/dynamic-content-updaters/content-driven-layout-refresh.md) — Triggers layout updates after images or web fonts load to ensure correct element positioning. ([source](https://masonry.desandro.com/extras))
- [Column-Based Responsive Grids](https://awesome-repositories.com/f/user-interface-experience/full-screen-viewport-layouts/responsive-layout-switches/column-based-responsive-grids.md) — Uses column-based responsive grids that automatically reflow elements to fit different viewport dimensions.
- [Grid Layout Management](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/item-positioning/dynamic-item-layout-syncing/grid-layout-management.md) — Recalculates grid positions after images load or browser windows resize to prevent element overlap.
- [Absolute Positioning](https://awesome-repositories.com/f/user-interface-experience/layout-positioning/absolute-positioning.md) — Implements precise X and Y coordinate calculations to eliminate vertical gaps between elements of varying heights.
- [Layout Recalculation Triggers](https://awesome-repositories.com/f/user-interface-experience/layout-recalculation-triggers.md) — Triggers positioning updates in response to external events such as image loading or window resizing.
- [Grid Membership Synchronization](https://awesome-repositories.com/f/user-interface-experience/programmatic-grid-data-synchronization/grid-membership-synchronization.md) — Supports adding, removing, or inserting new elements to keep the layout synchronized with the DOM. ([source](https://masonry.desandro.com/methods))
- [Viewport Resize Handling](https://awesome-repositories.com/f/user-interface-experience/viewport-resize-handling.md) — Automatically recalculates element sizes and positions when the browser window dimensions change. ([source](https://masonry.desandro.com/options))
- [Element Transitioning Mechanisms](https://awesome-repositories.com/f/user-interface-experience/animation-libraries/element-transitioning-mechanisms.md) — Provides mechanisms to animate the transition of elements into their calculated grid positions.
- [Directional Layout Flows](https://awesome-repositories.com/f/user-interface-experience/directional-layout-flows.md) — Determines the placement sequence of items based on defined directional flows like top-down or left-to-right.
- [Flow Layouts](https://awesome-repositories.com/f/user-interface-experience/flexbox-layout-models/flow-layouts.md) — Positions elements sequentially and manages the starting point and direction of the grid flow. ([source](https://masonry.desandro.com/options))
- [Static Space Reservation](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/item-positioning/static-space-reservation.md) — Places static elements into the grid so that floating items are positioned around them. ([source](https://masonry.desandro.com/methods))
- [Layout Event Listeners](https://awesome-repositories.com/f/user-interface-experience/layout-event-listeners.md) — Implements event listeners that execute custom functions whenever specific layout changes occur. ([source](https://masonry.desandro.com/methods))
- [Staggered Grid Column Counts](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/dimension-controllers/minimum-dimension-calculators/dimension-constraints/grid-column-customization/staggered-grid-column-counts.md) — Adjusts the number of grid columns at runtime while supporting items of different heights. ([source](https://masonry.desandro.com/extras))
- [Staggered Animations](https://awesome-repositories.com/f/user-interface-experience/staggered-animations.md) — Masonry.js ability to stagger the movement of elements to make them transition incrementally rather than simultaneously. ([source](https://masonry.desandro.com/options))
- [View Transition Animations](https://awesome-repositories.com/f/user-interface-experience/view-transition-animations.md) — Interpolates the positions of grid elements when transitioning between different layout calculations. ([source](https://masonry.desandro.com/extras))

### Software Engineering & Architecture

- [Grid-DOM Synchronization](https://awesome-repositories.com/f/software-engineering-architecture/background-thread-dispatchers/dom-synchronization/grid-dom-synchronization.md) — Tracks the addition and removal of child elements to maintain a consistent mapping between the DOM and the grid.

### Web Development

- [DOM Element Manipulators](https://awesome-repositories.com/f/web-development/dom-element-manipulators.md) — Programmatically calculates and applies absolute coordinates to place HTML elements within the browser DOM.