Masonry (grid) component | Adobe Commerce Developer Guide

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

Configuration 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	20
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	10
refreshFPS	Layout update FPS during window resizing.	Int	60
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