Cluster

Arranges child elements horizontally.

Usage

Lorem ipsum

dolor sit

amet consectetur

adipisicing elit

sed do


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


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


import { Cluster } from '@inc2734/unitone-css';
 
<Cluster alignItems="center">
	...
</Cluster>

HTML -justify-content:{value} / JSX justifyContent={value}

Justification of the horizontal direction.

start / center / end / space-between / space-around / space-evenly


<div data-unitone-layout="cluster -justify-content:center">
	...
</div>


import { Cluster } from '@inc2734/unitone-css';
 
<Cluster justifyContent="center">
	...
</Cluster>

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="cluster -gap:-2">
	...
</div>


import { Cluster } from '@inc2734/unitone-css';
 
<Cluster gap={-2}>
	...
</Cluster>

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

Column gap.


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


import { Cluster } from '@inc2734/unitone-css';
 
<Cluster columnGap={-2}>
	...
</Cluster>

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

Row gap.


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


import { Cluster } from '@inc2734/unitone-css';
 
<Cluster rowGap={-2}>
	...
</Cluster>

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

stripe


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


import { Cluster } from '@inc2734/unitone-css';
 
<Cluster divider="stripe">
	...
</Cluster>

slash


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


import { Cluster } from '@inc2734/unitone-css';
 
<Cluster divider="slash">
	...
</Cluster>

bordered


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


import { Cluster } from '@inc2734/unitone-css';
 
<Cluster divider="bordered">
	...
</Cluster>