---json
{
    "page_id": "d2afbygfvqzs2j53y723u"
}
---
====== ComboStrap UI - Masonry ======



===== About =====
''masonry'' is a [[docs:layout:component:component|layout component]]. Its children are laid out like a mason-fitting stones in a wall (placing elements based on available vertical space).

This layout is handy when you want to lay out a list of components that do not have a uniform height (Ie to mix small and big cards for instance).

A masonry layout is generally used with [[docs:block:card|cards]] or [[docs:block:blockquote|blockquotes]].

===== Syntax =====
<code dw>
<masonry>
   <!-- Component -->
</masonry>
</code>


===== Example =====

==== With static element ====

<webcode name="Default" frameborder=0>
<code dw>
<masonry>

    <card>
        {{:teaser_image_1.png|}}
        <heading 3>Teaser Title</heading>
        A example taken from [[https://getbootstrap.com/docs/4.3/components/card/#example|the bootstrap quick example]] on how to build a card title in order to make up the bulk of the teaser content. 
        
        <btn>[[:start|Go to this page !]]</btn>
    </card>


    <blockquote>
        Lorem ipsum [[:start|dolor]] sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        <cite>Someone famous in [[:start|Source Title]]</cite>
    </blockquote>

</masonry>
</code>
</webcode>

==== With a dynamic list of pages ====

Example of a list of ''Recent Articles Changed'' with an [[docs:templating:iterator|iterator]].
<webcode name="Default" frameborder=0>
<code dw>
<iterator>
    <data>select where path != ':start' and is_low_quality = 0 order by date_modified desc limit 8</data>
    <heading d4 align="text-center" spacing="mb-3"> Recent Articles Changed </heading>
    <masonry>
        <fragment>
            <card clickable>
            <page-image featured ratio="21:9" default="first|ancestor|vignette|logo" />
            <heading 3>$title</heading>
            <itext color="muted">//Modified - ${date_modified | format('EEEE dd MMMM')}//</itext>

            ${description | head(100, "...")}  [[$path| ]]
            </card>
        </fragment>
    </masonry>
</iterator>
</code>
</webcode>

===== Support =====

==== Bootstrap 5 support ====

If you use [[release:archive:1.13_bootstrap5|Bootstrap version 5]], you may see that the output is slightly different than with Bootstrap version 4.

This is because [[release:archive:1.13_bootstrap5|Bootstrap version 5]] does not support ''card-column'' anymore and we have implemented it manually.