Skip to content

masonry_grid

The masonry_grid macro is used to render a list of tile elements in a form of a masonry grid.

Definition

{% masonry_grid(itemsList, options) %}

Input parameters

itemsList

itemsList represents a template of items being passed to a list grid. It is usually created with the help of tile macros like blog_article_tile.

options

object represents an object of list grid options

Option key Type Default Required Description
options.grid object null yes Settings of the product list grid for different screen resolutions
options.classNames string "" no List of classes that will be added to the list grid

options.grid

object represents settings of the product list grid for different screen resolutions

Option key Type Default Required Description
options.grid.phoneItemsCountPerRow number - yes Number of items per row on a mobile screen resolution
options.grid.smallTabletItemsCountPerRow number - yes Number of items per row on a small tablet screen resolution
options.grid.tabletItemsCountPerRow number - yes Number of items per row on a tablet screen resolution
options.grid.laptopItemsCountPerRow number - yes Number of items per row on a laptop screen resolution
options.grid.desktopItemsCountPerRow number - yes Number of items per row on a desktop screen resolution

Example

In this example we use a list grid to render a tile grid of blog articles. In order to get the necessary article list we use a getBlogArticles() method from Object Api. Then we create a template of tile items using the blog_article_tile macro and use that template in our list grid.

{% from "@macros/masonry_grid.twig" import masonry_grid %}
{% from "@macros/blog_article_tile.twig" import blog_article_tile %}

{% set articles = ObjectApi.getBlogArticles() %}

{% set itemsList %}
    {% for article in articles %}
        {{ blog_article_tile(article, {
            shouldShowImage: true,
            shouldShowDate: true,
            shouldShowAuthor: true,
            shouldShowCommentsQuantity: true
        }) }}
    {% endfor %}
{% endset %}

{{
    masonry_grid(
        itemsList,
        {
            grid: {
                phoneItemsCountPerRow: 1,
                smallTabletItemsCountPerRow: 2,
                tabletItemsCountPerRow: 2,
                laptopItemsCountPerRow: 4,
                desktopItemsCountPerRow: 5
            }
        }
    )
}}

Example

In this example we use a similar list grid to the previous example but we add a box class to the list grid giving it a border and some padding.

{% from "@macros/masonry_grid.twig" import masonry_grid %}
{% from "@macros/blog_article_tile.twig" import blog_article_tile %}

{% set articles = ObjectApi.getBlogArticles() %}

{% set itemsList %}
    {% for article in articles %}
        {{ blog_article_tile(article, {
            shouldShowImage: true,
            shouldShowDate: true,
            shouldShowAuthor: true,
            shouldShowCommentsQuantity: true
        }) }}
    {% endfor %}
{% endset %}

{{
    masonry_grid(
        itemsList,
        {
            classNames: 'box',
            grid: {
                phoneItemsCountPerRow: 1,
                smallTabletItemsCountPerRow: 2,
                tabletItemsCountPerRow: 2,
                laptopItemsCountPerRow: 4,
                desktopItemsCountPerRow: 5
            }
        }
    )
}}

Macro source code

{% macro masonry_grid(itemsList, options) %}
    <div class="
            masonry-grid
            masonry-grid_l
            masonry-grid_xs-{{ options.grid.phoneItemsCountPerRow }}
            masonry-grid_sm-{{ options.grid.smallTabletItemsCountPerRow }}
            masonry-grid_md-{{ options.grid.tabletItemsCountPerRow }}
            masonry-grid_lg-{{ options.grid.laptopItemsCountPerRow }}
            masonry-grid_xxl-{{ options.grid.desktopItemsCountPerRow }}
            {{ options.classNames|join(' ') }}
        "
    >
        {{ itemsList }}
    </div>
{% endmacro %}

ObjectApi objects reference

ObjectApi methods reference