# ComboStrap UI - Masonry

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

<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.

</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.

## 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.