Installation

masonry requires JavaScript for cross-browser support so you need to import and run the masonry script.

import { masonry } from '@splendidlabz/layouts/scripts'
masonry()

More information about this script can be found in the masonry Script section.

Basic Usage

masonry’s API is similar to grid-simple. You can define the number of columns in your masonry grid with --cols.

<div class="masonry [--cols:2]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Spanning Multiple items

You can span an item across multiple columns with the --span property.

<div class="masonry [--cols:3]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div class="[--span:2]">...</div>
  <div>...</div>
</div>

Dense

You can use dense to pack smaller items into the empty spaces left by larger items.

<div class="masonry [--cols:3] dense">
  <div>...</div>
  <div>...</div>
  <div class="[--span:2]">...</div>
  <div>...</div>
  <div>...</div>
</div>

Gap between grid items

You can change the gap between items with the gap property or the --gap variable. Row gaps cannot be adjusted independently from the column gap.

<div class="masonry [--cols:2] gap-8">
  <div>...</div>
  <div>...</div>
</div>

Responsive Behaviour

You can change --cols at different breakpoints to make your masonry Grid behave responsively.

<div class="masonry md:[--cols:2] lg:[--cols:3]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Masonry Gallery

masonry-gallery lets you size of each column with the --item-width property. --cols has no effect if you use this.

<div class="masonry-gallery [--item-width:10rem] dense">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
  </div>

The Masonry Script

Searching in a specific container

By default, the masonry script searches the DOM for any masonry layouts. If you wish to search for masonry in a specific container, you can pass an element or a selector into the script.

Passing an ElementPassing a Selector

container = document.querySelector('.container') masonry(container) ```
</Tabpanel>
<Tabpanel class="code">
```javascript import {masonry} from '@splendidlabz/layouts/scripts'
masonry('.container') ```
</Tabpanel>
</DocsTabs>

### Async containers

The script does not detect classes after it has been loaded. If you add a `masonry` class to an element after the script has been loaded, it won't be picked up.

To pick it up, you have to call the script again.

### Automatically waiting for Images and Videos to Load

The `masonry` script waits for images and videos to load before calculating layouts. This ensures your layout is accurate regardless of the content it holds.

<DocsTabs tablistItems={['Code', 'Preview']}>
<Tabpanel class="code" active>
  ```html
  <div class="masonry [--cols:3] dense">
    <div> <img src="..." /> </div>
    <div> <img src="..." /> </div>
    <div> <img src="..." /> </div>
    <div> <img src="..." /> </div>
    <div> <img src="..." /> </div>
  </div>

Resize Observer

The masonry script uses a resizeObserver to detect changes in the layouts. So masonry will run whenever the container resizes, or when you add items into the container. No need to worry about responsive layouts!