Responsive Grid
Generates a simple grid.
Usage
<div data-unitone-layout="responsive-grid">
<img src="https://placehold.jp/400x300.jpg" alt="" />
<img src="https://placehold.jp/400x300.jpg" alt="" />
<img src="https://placehold.jp/400x300.jpg" alt="" />
</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="responsive-grid -gap:-2">
<img src="https://placehold.jp/400x300.jpg" alt="" />
<img src="https://placehold.jp/400x300.jpg" alt="" />
<img src="https://placehold.jp/400x300.jpg" alt="" />
</div>HTML -auto-repeat:{value} / JSX autoRepeat={value}
auto-fill / auto-fit
<div data-unitone-layout="responsive-grid -auto-repeat:auto-fill">
<img src="https://placehold.jp/400x300.jpg" alt="" />
<img src="https://placehold.jp/400x300.jpg" alt="" />
<img src="https://placehold.jp/400x300.jpg" alt="" />
</div>HTML —unitone—column-min-width / JSX columnMinWidth={value}
min-width of each columns.
<div data-unitone-layout="responsive-grid" style="--unitone--column-min-width: 100px">
<img src="https://placehold.jp/400x300.jpg" alt="" />
<img src="https://placehold.jp/400x300.jpg" alt="" />
<img src="https://placehold.jp/400x300.jpg" alt="" />
</div>HTML -divider:{variation} / JSX divider={variation}
stripe
<div data-unitone-layout="responsive-grid -divider:stripe">
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
</div>stripe (Vertical)
<div data-unitone-layout="responsive-grid -divider:stripe-vertical">
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
</div>divide (Vertical)
<div data-unitone-layout="responsive-grid -divider:divide-vertical">
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
</div>underline
<div data-unitone-layout="responsive-grid -divider:underline">
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
</div>bordered
<div data-unitone-layout="responsive-grid -divider:bordered">
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
</div>HTML -stairs:{variation} / JSX stairs={variation}
Display the grid in a stairs manner.
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="responsive-grid -stairs:1">
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
</div>HTML -stairs-up:{value} / JSX stairsUp={value}
The direction of stairs. Default is left.
left / right / up-down / down-up
left
<div data-unitone-layout="responsive-grid -stairs:1 -stairs-up:left" style="--unitone--column-min-width: 160px">
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
</div>right
<div data-unitone-layout="responsive-grid -stairs:1 -stairs-up:right" style="--unitone--column-min-width: 160px">
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
<div><img src="https://placehold.jp/400x300.jpg" alt="" /></div>
</div>up-down
<div data-unitone-layout="responsive-grid -stairs:1 -stairs-up:up-down" style="--unitone--column-min-width: 160px">
<div><img src="https://placehold.jp/200x160.jpg" alt="" /></div>
<div><img src="https://placehold.jp/200x160.jpg" alt="" /></div>
<div><img src="https://placehold.jp/200x160.jpg" alt="" /></div>
<div><img src="https://placehold.jp/200x160.jpg" alt="" /></div>
</div>down-up
<div data-unitone-layout="responsive-grid -stairs:1 -stairs-up:down-up" style="--unitone--column-min-width: 160px">
<div><img src="https://placehold.jp/200x160.jpg" alt="" /></div>
<div><img src="https://placehold.jp/200x160.jpg" alt="" /></div>
<div><img src="https://placehold.jp/200x160.jpg" alt="" /></div>
<div><img src="https://placehold.jp/200x160.jpg" alt="" /></div>
</div>
Last updated on