PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

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

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

1
2
3
4
5
6
7
8
<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