### Bower Installation for Masonry

Source: https://context7.com/desandro/masonry/llms.txt

Provides instructions for installing Masonry using the Bower package manager, which is typically used in legacy front-end projects.

```bash
bower install masonry-layout --save
```

--------------------------------

### NPM Installation and Usage

Source: https://context7.com/desandro/masonry/llms.txt

Details how to install Masonry using npm for modern JavaScript build workflows and how to import and initialize it within a JavaScript module.

```bash
npm install masonry-layout --save
```

```javascript
// Import in your JavaScript module
import Masonry from 'masonry-layout';

var msnry = new Masonry('.grid', {
  columnWidth: 60,
  itemSelector: '.grid-item'
});
```

--------------------------------

### CDN Installation for Masonry

Source: https://context7.com/desandro/masonry/llms.txt

Provides instructions for including Masonry directly from a CDN (unpkg) for quick integration into web projects. It shows both the packaged (minified) and unminified versions for development purposes.

```html
<!-- Packaged version with dependencies -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<!-- Or unminified for development -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
```

--------------------------------

### Install Masonry via CDN

Source: https://github.com/desandro/masonry/blob/master/README.md

Include Masonry directly into your HTML using CDN links. Choose either the un-minified or minified version for your project. This method is straightforward for quick integration.

```html
<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>
```

--------------------------------

### Accessing Masonry Instance and Invoking Methods

Source: https://context7.com/desandro/masonry/llms.txt

Illustrates how to get a reference to the Masonry instance after initialization to call its methods, such as 'layout()'. It also shows how to access the instance when initialized with jQuery.

```javascript
// Store reference during initialization
var msnry = new Masonry('.grid', {
  columnWidth: 60
});

// Call methods on instance
msnry.layout();

// jQuery: access via data attribute
var msnry = $('.grid').data('masonry');
msnry.layout();
```

--------------------------------

### Initialize Masonry with Stamps in JavaScript

Source: https://github.com/desandro/masonry/blob/master/sandbox/stamps.html

Demonstrates how to initialize Masonry instances in JavaScript, applying grid layout to specified containers. This example showcases the use of `itemSelector`, `columnWidth`, `gutter`, and `stamp` options for layout configuration.

```javascript
var container = document.querySelector('#alpha');
var msnry = new Masonry( container, {
  itemSelector: '.item',
  columnWidth: 60,
  gutter: 10,
  stamp: '.stamp'
});
```

```javascript
var container = document.querySelector('#beta');
var msnry = new Masonry( container, {
  columnWidth: 60,
  gutter: 10,
  stamp: '.stamp'
});
```

--------------------------------

### Masonry Basic RTL Initialization (JavaScript)

Source: https://github.com/desandro/masonry/blob/master/sandbox/right-to-left.html

Initializes a Masonry instance with right-to-left layout support. It targets a container element and sets `originLeft` to false for RTL behavior. Requires the Masonry library.

```javascript
( function() {
  var container = document.querySelector('#basic');
  var msnry = new Masonry( container, {
    originLeft: false,
    columnWidth: 60
  });
})();
```

--------------------------------

### Initialize Masonry Grid and Add Items (JavaScript)

Source: https://github.com/desandro/masonry/blob/master/sandbox/add-items.html

Initializes a Masonry grid layout on an element with the class 'grid'. It configures column width using a '.grid-sizer' element and enables percentage-based positioning. It also includes event listeners for buttons to prepend and append new items to the grid dynamically. Dependencies: Masonry library.

```javascript
function getItemElement() { var elem = document.createElement('div'); var wRand = Math.random(); var hRand = Math.random(); var widthClass = wRand > 0.8 ? 'grid-item--width3' : wRand > 0.6 ? 'grid-item--width2' : ''; var heightClass = hRand > 0.8 ? 'grid-item--height3' : hRand > 0.5 ? 'grid-item--height2' : ''; elem.className = 'grid-item ' + widthClass + ' ' + heightClass; return elem; }; var msnry = new Masonry( '.grid', { columnWidth: '.grid-sizer', percentPosition: true }); document.querySelector('.prepend-button').addEventListener( 'click', function() { var itemElem = getItemElement(); msnry.element.insertBefore( itemElem, msnry.element.firstChild ); msnry.prepended( itemElem ); }); document.querySelector('.append-button').addEventListener( 'click', function() { var itemElem = getItemElement(); msnry.element.appendChild( itemElem ); msnry.appended( itemElem ); });
```

--------------------------------

### Initialize Masonry with Horizontal Order (JavaScript)

Source: https://github.com/desandro/masonry/blob/master/sandbox/horizontal-order.html

Initializes a new Masonry instance with the 'horizontalOrder' option set to true. This option arranges items from left to right. Requires the Masonry library to be included.

```javascript
new Masonry( '.grid--1', {
  itemSelector: '.grid-item',
  horizontalOrder: true,
});
new Masonry( '.grid--2', {
  itemSelector: '.grid-item',
  horizontalOrder: true,
});
```

--------------------------------

### Masonry Basic Bottom Up Layout (JavaScript)

Source: https://github.com/desandro/masonry/blob/master/sandbox/bottom-up.html

Initializes Masonry with a bottom-up layout. Sets 'isOriginTop' to false to arrange items starting from the bottom. Requires a container element with the ID 'basic'.

```javascript
( function() { var container = document.querySelector('#basic'); var msnry = new Masonry( container, { isOriginTop: false, columnWidth: 60 }); })();
```

--------------------------------

### Masonry Stamped RTL Initialization (JavaScript)

Source: https://github.com/desandro/masonry/blob/master/sandbox/right-to-left.html

Initializes a Masonry instance with right-to-left layout and a stamped element. It configures item selection, RTL orientation, column width, gutter, and the stamped element's selector. Requires the Masonry library.

```javascript
( function() {
  var container = document.querySelector('#stamped');
  var msnry = new Masonry( container, {
    itemSelector: '.item',
    originLeft: false,
    columnWidth: 60,
    gutter: 10,
    stamp: '.stamp'
  });
})();
```

--------------------------------

### Initialize Masonry with Horizontal Order and Stamp (JavaScript)

Source: https://github.com/desandro/masonry/blob/master/sandbox/horizontal-order.html

Initializes a Masonry instance with 'horizontalOrder' enabled and specifies a 'stamp' element. The stamp element will not be included in the masonry layout. Requires the Masonry library.

```javascript
new Masonry( '.grid--3', {
  itemSelector: '.grid-item',
  horizontalOrder: true,
  stamp: '.stamp',
})
```

--------------------------------

### Masonry Dynamic Item Addition

Source: https://context7.com/desandro/masonry/llms.txt

Adds new items to the Masonry layout dynamically using `prepended()` for new items at the start or `appended()` for new items at the end. Requires event listeners to trigger item addition.

```javascript
var msnry = new Masonry('.grid', {
  columnWidth: '.grid-sizer',
  percentPosition: true
});

// Prepend items
document.querySelector('.prepend-button').addEventListener('click', function() {
  var itemElem = document.createElement('div');
  itemElem.className = 'grid-item';
  msnry.element.insertBefore(itemElem, msnry.element.firstChild);
  msnry.prepended(itemElem);
});

// Append items
document.querySelector('.append-button').addEventListener('click', function() {
  var itemElem = document.createElement('div');
  itemElem.className = 'grid-item';
  msnry.element.appendChild(itemElem);
  msnry.appended(itemElem);
});
```

--------------------------------

### Initialize Masonry with Vanilla JavaScript

Source: https://context7.com/desandro/masonry/llms.txt

Initializes Masonry using vanilla JavaScript, either with an element reference or a CSS selector string. Requires the Masonry library to be loaded.

```javascript
var container = document.querySelector('.grid');
var msnry = new Masonry(container, {
  itemSelector: '.grid-item',
  columnWidth: 60
});

var msnry = new Masonry('.grid', {
  columnWidth: 60
});
```

--------------------------------

### Initialize Masonry with Vanilla JavaScript

Source: https://github.com/desandro/masonry/blob/master/README.md

Initialize Masonry using native JavaScript. This can be done by passing either a DOM element or a CSS selector to the Masonry constructor, along with layout options.

```javascript
// 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...
});
```

--------------------------------

### Initialize Masonry with HTML Attributes

Source: https://context7.com/desandro/masonry/llms.txt

Declaratively initializes Masonry using data attributes directly in HTML, eliminating the need for JavaScript initialization code. Requires the Masonry library script to be included.

```html
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
```

--------------------------------

### Initialize Masonry with jQuery Plugin

Source: https://context7.com/desandro/masonry/llms.txt

Initializes Masonry as a jQuery plugin, integrating seamlessly with jQuery projects. Ensure jQuery and jquery-bridget are included.

```javascript
$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 200
});

var msnryInstance = $('.grid').data('masonry');
```

--------------------------------

### Initialize Masonry with HTML data-masonry attribute

Source: https://github.com/desandro/masonry/blob/master/README.md

Initialize Masonry by adding a `data-masonry` attribute directly to your HTML element. Layout options are provided as a JSON string within the attribute's value.

```html
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>
```

--------------------------------

### Masonry Element-Based Column Sizing

Source: https://context7.com/desandro/masonry/llms.txt

Defines responsive column widths using an element as a reference, suitable for percentage-based layouts. The `percentPosition` option should be set to true.

```javascript
var msnry = new Masonry('.grid', {
  columnWidth: '.grid-sizer',
  percentPosition: true
});
```

--------------------------------

### Masonry Right-to-Left and Bottom-Up Layouts

Source: https://context7.com/desandro/masonry/llms.txt

Sets the origin position for layouts, enabling right-to-left (`isOriginLeft: false`) or bottom-up (`isOriginTop: false`) arrangements. Can be combined for bottom-right layouts.

```javascript
// Right-to-left layout
var msnry = new Masonry('#rtl-container', {
  isOriginLeft: false,
  columnWidth: 60
});

// Bottom-up layout
var msnry = new Masonry('#bottom-container', {
  isOriginTop: false,
  columnWidth: 60
});

// Bottom-right layout
var msnry = new Masonry('#bottom-right-container', {
  isOriginLeft: false,
  isOriginTop: false,
  columnWidth: 60
});
```

--------------------------------

### Initialize Masonry with jQuery

Source: https://github.com/desandro/masonry/blob/master/README.md

Initialize Masonry on a selected element using jQuery. This method requires the jQuery library and specifies layout options such as `itemSelector` and `columnWidth`.

```javascript
$('.grid').masonry({
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});
```

--------------------------------

### Configure Masonry Column Width and Gutter

Source: https://context7.com/desandro/masonry/llms.txt

Sets the column width and gutter spacing for the Masonry layout. This controls the size of the grid columns and the space between them.

```javascript
var msnry = new Masonry('.grid', {
  itemSelector: '.item',
  columnWidth: 60,
  gutter: 10
});
```

--------------------------------

### Masonry Stamped Bottom Up Layout (JavaScript)

Source: https://github.com/desandro/masonry/blob/master/sandbox/bottom-up.html

Initializes Masonry with a bottom-up layout and a stamp element. 'isOriginTop' is set to false, and 'stamp' targets a '.stamp' element. Requires a container with the ID 'stamped'.

```javascript
( function() { var container = document.querySelector('#stamped'); var msnry = new Masonry( container, { itemSelector: '.item', isOriginTop: false, columnWidth: 60, gutter: 10, stamp: '.stamp' }); })();
```

--------------------------------

### Stamping Elements in Masonry Layout

Source: https://context7.com/desandro/masonry/llms.txt

Explains how to use the 'stamp' option in Masonry to reserve space for fixed-position elements within the grid layout. This is useful for elements like headers or advertisements that should maintain a consistent position relative to the grid.

```javascript
var msnry = new Masonry('.container', {
  itemSelector: '.item',
  columnWidth: 60,
  gutter: 10,
  stamp: '.stamp'
});
```

--------------------------------

### Masonry Layout Refresh

Source: https://context7.com/desandro/masonry/llms.txt

Triggers a layout recalculation after content or container size changes. `layout()` recalculates positions, while `reloadItems()` and `layout()` together perform a full refresh.

```javascript
var msnry = new Masonry('.grid', {
  columnWidth: 60
});

// Recalculate layout after content changes
msnry.layout();

// Reload and recalculate from scratch
msnry.reloadItems();
msnry.layout();
```

--------------------------------

### Masonry Fit Width Centering

Source: https://context7.com/desandro/masonry/llms.txt

Enables the `fitWidth` option to automatically center the grid container within its parent. Requires the container to have auto margins set in CSS.

```javascript
var msnry = new Masonry('.container', {
  fitWidth: true,
  columnWidth: 120
});
```

--------------------------------

### Removing Items from Masonry Layout

Source: https://context7.com/desandro/masonry/llms.txt

Demonstrates how to remove specific items from a Masonry grid instance and then recalculate the layout to accommodate the changes. This is useful for dynamic content updates where items are removed from view.

```javascript
var msnry = new Masonry('.grid', {
  itemSelector: '.grid-item',
  columnWidth: 60
});

// Remove specific item
var itemToRemove = document.querySelector('.grid-item:first-child');
msnry.remove(itemToRemove);
msnry.layout();
```

--------------------------------

### CSS for Masonry Layout Styling

Source: https://github.com/desandro/masonry/blob/master/sandbox/stamps.html

Provides CSS rules for styling elements within Masonry grids, including stamps and general layout containers. These styles define dimensions, positioning, and borders for grid items and special elements.

```css
#alpha .stamp1 { width: 30%; height: 100px; left: 30%; top: 20px; }
#alpha .stamp2 { width: 200px; height: 50px; left: 20px; top: 50px; }
#beta { border-style: solid; border-width: 40px 30px 20px 10px; padding: 10px 20px 30px 40px; }
#beta .stamp1 { width: 30%; height: 100px; left: 10%; top: 20px; }
#beta .stamp2 { width: 200px; height: 50px; right: 20px; top: 50px; }
```

--------------------------------

### Masonry Horizontal Ordering

Source: https://context7.com/desandro/masonry/llms.txt

Configures Masonry to maintain the original horizontal order of items instead of optimizing for vertical positioning. Useful for specific design requirements.

```javascript
var msnry = new Masonry('.grid', {
  itemSelector: '.grid-item',
  horizontalOrder: true
});
```

--------------------------------

### Masonry Bottom Up Layout Styling (CSS)

Source: https://github.com/desandro/masonry/blob/master/sandbox/bottom-up.html

CSS rules for elements within a 'bottom up' Masonry layout, specifically for stamped items. Defines width, height, and positioning relative to the bottom.

```css
#stamped .stamp1 { width: 30%; height: 100px; left: 30%; bottom: 20px; }
#stamped .stamp2 { width: 200px; height: 50px; left: 20px; bottom: 50px; }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.