6.47 Masonry Grid View in a new window
Columns of items that create a brickwork looking grid.
Twig: components/masonry-grid/masonry-grid.twig
Example
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Markup
<div class="masonry-grid">
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/400x200', url: './item-8-32.html?hideAll' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/600x800' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/400x600' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/480x320' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/500x500' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/400x500' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/1400x700' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/700x700' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/700x900' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/350x150' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/700x700' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/700x700' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/480x320' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/500x500' } %}
</div>