Both Sides

Child elements are aligned at both ends. If the width of a child element becomes too large to maintain justification, it will be placed in a single column.

Usage

<div data-unitone-layout="both-sides">
	<p>Lorem ipsum dolor sit amet</p>
	<ul>
		<li>Lorem</li>
		<li>ipsum</li>
		<li>dolor</li>
	</ul>
</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.

<div data-unitone-layout="both-sides -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="both-sides -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="both-sides -row-gap:-2">
	...
</div>

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

Alignment of the row direction.

start / center / end / stretch / space-between

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

--unitone--content-max-width

max-width of the item.

<div data-unitone-layout="both-sides">
	<p style="--unitone--content-max-width: 400px">Lorem ipsum dolor sit amet</p>
	<ul>
		<li>Lorem</li>
		<li>ipsum</li>
		<li>dolor</li>
	</ul>
</div>

--unitone--content-width

width of the item.

<div data-unitone-layout="both-sides">
	<p style="--unitone--content-width: 400px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	<ul>
		<li>Lorem</li>
		<li>ipsum</li>
		<li>dolor</li>
	</ul>
</div>