PHP 7.3 reached end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in September 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
:
- app\code\Magento\Ui\view\base\web\js\grid\masonry.js
- app\code\Magento\Ui\view\base\web\templates\grid\masonry.html