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

Lorem ipsum dolor sit amet

Lorem
ipsum
dolor


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


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

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

Column gap.


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


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

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

Row gap.


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


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

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>


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

—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>


import { BothSides } from '@inc2734/unitone-css';
 
<BothSides>
	<p style={{ '--unitone--content-max-width': '400px' }}>Lorem ipsum dolor sit amet</p>
	<ul>
		<li>Lorem</li>
		<li>ipsum</li>
		<li>dolor</li>
	</ul>
</BothSides>

—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>


import { BothSides } from '@inc2734/unitone-css';
 
<BothSides>
	<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>
</BothSides>