README
<Masonry></Masonry>
A container in which the items are laid out one after the other in the inline (or block) direction.
If you have a collection of images, each has different aspect ratio, the Masonry layout is a good choice.
Preview
<Masonry tag='div' theme='primary' size='lg' orientation='block'>
<img src="..." alt="..." />
<img src="..." alt="..." />
<img src="..." alt="..." />
<img src="..." alt="..." />
<img src="..." alt="..." />
<img src="..." alt="..." />
<img src="..." alt="..." />
</Masonry>
Rendered to:
<div class="c1 thPrimary szLg block">
<img src="..." alt="..." />
<img src="..." alt="..." />
<img src="..." alt="..." />
<img src="..." alt="..." />
<img src="..." alt="..." />
<img src="..." alt="..." />
<img src="..." alt="..." />
</div>
Features
- Includes all features in
<Content />. - Vertical orientation (block, default) -or- horizontal orientation (inline).
- Automatically rebuilds the layout when resizing, items added/removed, and items resized.
- Customizable via
@cssfn/css-config.
Installation
Using npm:
npm i @nodestrap/masonry
Support Us
If you feel our lib is useful for your projects,
please make a donation to avoid our project from extinction.
We always maintain our projects as long as we're still alive.