Masonry

Gallery with elements laid out in optimal position based on available vertical space.

How to

The Masonry component is used to create a gallery where the items are automatically arranged based on the available vertical spacing.

You can set a minimum width for the items in your grid using the --masonry-col-auto-size CSS variable; this will automatically determine the number of columns in your grid (no CSS media queries required).

The --masonry-grid-gap CSS custom property is used to set the grid gap. 

:root {
  --masonry-grid-gap: var(--space-sm);
  --masonry-col-auto-size: 280px; // col min-width value -> used in JS to auto-update the masonry cols width
}

Custom Events #

The masonry component comes with two custom events that you can use to reset the gallery layout:

1. masonry-reset: use this event when your gallery items change and you require a layout reset, such as when adding new elements to your masonry gallery through infinite scrolling.
2. masonry-resize: this event is used to reset the gallery layout during a window resize; use it when you need to adjust the gallery layout without altering the gallery items, such as when the container width changes and the layout is not automatically adjusted.

var masonryGallery = document.getElementsByClassName('js-masonry');
if(masonryGallery.length > 0) {
  // reset layout (e.g., new items added to the gallery)
  masonryGallery[0].dispatchEvent(new CustomEvent('masonry-reset'));

  // reset layout (e.g., gallery width has changed)
  masonryGallery[0].dispatchEvent(new CustomEvent('masonry-resize'));
}

Categories

• Content and Layout > Gallery

Bug report & feedback

Component Github page ↗