Cluster

Arranges child elements horizontally.

Usage

<div data-unitone-layout="cluster">
	<div>Lorem ipsum</div>
	<div>dolor sit</div>
	<div>amet consectetur</div>
	<div>adipisicing elit</div>
	<div>sed do</div>
</div>

Props

HTML -align-items:{value} / JSX alignItems={value}

Alignment of the row direction.

start / center / end / stretch / space-between

<div data-unitone-layout="cluster -align-items:center">
	...
</div>

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.

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

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

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

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

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

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

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

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

stripe

<div data-unitone-layout="cluster -divider:stripe">
	...
</div>

slash

<div data-unitone-layout="cluster -divider:slash">
	...
</div>

bordered

<div data-unitone-layout="cluster -divider:bordered">
	...
</div>