This is a beta release of documentation for Magento 2.4, published for previewing soon-to-be-released functionality. Content in this version is subject to change. Links to the v2.4 code base may not properly resolve until the code is officially released.

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