Skip to Content
DocumentationLayout PrimitivesMasonry

Masonry

Elements of different sizes are laid out without gaps.

Usage

<div data-unitone-layout="masonry">
	<img src="https://placehold.jp/400x300.jpg" alt="" />
	<img src="https://placehold.jp/300x400.jpg" alt="" />
	<img src="https://placehold.jp/400x600.jpg" alt="" />
	<img src="https://placehold.jp/600x800.jpg" alt="" />
	<img src="https://placehold.jp/1024x640.jpg" alt="" />
	<img src="https://placehold.jp/300x400.jpg" alt="" />
	<img src="https://placehold.jp/1024x768.jpg" alt="" />
	<img src="https://placehold.jp/1024x768.jpg" alt="" />
	<img src="https://placehold.jp/400x300.jpg" alt="" />
	<img src="https://placehold.jp/800x800.jpg" alt="" />
</div>

Props

HTML -gap:{variation} / JSX gap={variation}

Gap.

Can be set from -2 to 7. For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens. If it is 1 or more, adding s will shrink it to size -1 on mobile. (e.g. 1s) If it is 2 or more, adding m will shrink it to size 1 on mobile. (e.g. 2m)

<div data-unitone-layout="masonry -gap:-2">
	...
</div>

HTML —unitone—column-width / JSX columnWidth={value}

Column width.

--unitone--column-width specifies the ideal width of the column.

<div data-unitone-layout="masonry" style="--unitone--column-width: 250px">
	...
</div>
Last updated on
LayersReel