Masonry (grid) component

The Masonry component is a collection of columns. It renders the masonry grid layout in the Ui component.

Dependencies

The Masonry component has dependencies on the following components:

Listing: app/code/Magento/Ui/view/base/web/js/grid/listing.js
Request Animation Frame: app/code/Magento/Ui/view/base/web/js/lib/view/utils/raf.js

Options

Option

Description

Type

Default Value

containerId

Images container id.

String

minRatio

Minimum aspect ratio for each image.

Int

containerWidth

Width of the container.

Int

window.innerWidth

imageMargin

Margin between images.

Int

maxImageHeight

Maximum height of the image.

Int

240

containerWidthToMinRatio

Minimum width and height ratio when the container width is less than default key.

Object

{640: 3, 1280: 5, 1920: 8}

defaultMinRatio

Default minimal image width to height ratio.

Int

refreshFPS

Layout update FPS during window resizing.

Int

template

Path to the component's .html template.

String

ui/grid/masonry

Examples

<columns name="masonry_images_columns" component="Magento_Ui/js/grid/masonry">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="containerId" xsi:type="string">masonry-grid-example</item>
            </item>
        </argument>
        ...
</columns>

Source files

Extends Listing:

Result

Masonry Grid