Vertical Ends
This places child elements at the beginning or end of the vertical layout.
Usage
Lorem ipsum dolor sit amet
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit
voluptate velit esse cill
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
<div data-unitone-layout="responsive-grid">
<div data-unitone-layout="vertical-ends">
<div data-unitone-layout="stack -gap:-2">
<div data-unitone-layout="frame">
<img src="..." />
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<p>dolore magna aliqua.</p>
</div>
<div data-unitone-layout="vertical-ends">
<div data-unitone-layout="stack -gap:-2">
<div data-unitone-layout="frame">
<img src="..." />
</div>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
</div>
<p>aliquip ex ea commodo consequat.</p>
</div>
<div data-unitone-layout="vertical-ends">
<div data-unitone-layout="stack -gap:-2">
<div data-unitone-layout="frame">
<img src="..." />
</div>
<p>Duis aute irure dolor in reprehenderit</p>
</div>
<p>voluptate velit esse cill</p>
</div>
<div data-unitone-layout="vertical-ends">
<div data-unitone-layout="stack -gap:-2">
<div data-unitone-layout="frame">
<img src="..." />
</div>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
</div>
<p>ex ea commodo consequat.</p>
</div>
</div>Props
HTML -gap:{variation} / JSX gap={variation}
Gap.
Can be set from -3 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="responsive-grid">
<div data-unitone-layout="vertical-ends -gap:-2">
<div data-unitone-layout="stack -gap:-2">
<div data-unitone-layout="frame">
<img src="..." />
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<p>dolore magna aliqua.</p>
</div>
<div data-unitone-layout="vertical-ends -gap:-2">
<div data-unitone-layout="stack -gap:-2">
<div data-unitone-layout="frame">
<img src="..." />
</div>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
</div>
<p>aliquip ex ea commodo consequat.</p>
</div>
<div data-unitone-layout="vertical-ends -gap:-2">
<div data-unitone-layout="stack -gap:-2">
<div data-unitone-layout="frame">
<img src="..." />
</div>
<p>Duis aute irure dolor in reprehenderit</p>
</div>
<p>Duis aute irure dolor in reprehenderit</p>
</div>
<div data-unitone-layout="vertical-ends -gap:-2">
<div data-unitone-layout="stack -gap:-2">
<div data-unitone-layout="frame">
<img src="..." />
</div>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
</div>
<p>ex ea commodo consequat.</p>
</div>
</div>
HTML -align-items:{value} / JSX alignItems={value}
Alignment of the row direction.
start / center / end / stretch / baseline
<div data-unitone-layout="responsive-grid">
<div data-unitone-layout="vertical-ends -align-items:start">
<div data-unitone-layout="stack -gap:-2">
<div data-unitone-layout="frame">
<img src="..." />
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<p>dolore magna aliqua.</p>
</div>
<div data-unitone-layout="vertical-ends -align-items:start">
<div data-unitone-layout="stack -gap:-2">
<div data-unitone-layout="frame">
<img src="..." />
</div>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
</div>
<p>aliquip ex ea commodo consequat.</p>
</div>
<div data-unitone-layout="vertical-ends -align-items:start">
<div data-unitone-layout="stack -gap:-2">
<div data-unitone-layout="frame">
<img src="..." />
</div>
<p>Duis aute irure dolor in reprehenderit</p>
</div>
<p>voluptate velit esse cill</p>
</div>
<div data-unitone-layout="vertical-ends -align-items:start">
<div data-unitone-layout="stack -gap:-2">
<div data-unitone-layout="frame">
<img src="..." />
</div>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
</div>
<p>ex ea commodo consequat.</p>
</div>
</div>
Last updated on