ComboStrap UI - Masonry
Table of Contents
About
masonry is a 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 does not have an uniform height (Ie to mix small and big card for instance).
A masonry layout is generally used with cards or blockquotes.
Syntax
<masonry>
<!-- Component -->
</masonry>
Example
With static element
<masonry>
<card>
{{:teaser_image_1.png|}}
=== Teaser Title ===
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>

Teaser Title
A example taken from the bootstrap quick example on how to build a card title in order to make up the bulk of the teaser content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
With a dynamic list of pages
Example of a list of Recent Articles Changed with an iterator.
<iterator>
<data>select where path != ':start' and is_low_quality = 0 order by date_modified desc limit 8</data>
<heading d4 text-align="center" spacing="mb-3"> Recent Articles Changed </heading>
<masonry>
<template>
<card clickable>
<page-image path="$path" ratio="21:9" zoom=-6 />
=== $title ===
<itext color="muted">//Modified <date format="%h %d - %H:%M">$date_modified</date>//</itext>
<pipeline>"$description" | head(100, "...")</pipeline> [[$path| ]]
</card>
</template>
</masonry>
</iterator>
Recent Articles Changed
Support
Bootstrap 5 support
If you use Bootstrap version 5, you may see that the output is slightly different than with Bootstrap version 4.
This is because Bootstrap version 5 does not support card-column anymore and we have implemented it manually.