Grid
コンテンツをGridレイアウトで配置するためのコンポーネントです。
対応するHTML構造
<div class="l--grid">...</div>より具体的な用途に合わせて Columns, RatioGrid, TileGrid などのコンポーネントも用意していますが、内部ではこのGridを使用しています。
Props
areas:grid-template-areasの値を指定できます。columns:grid-template-columnsrows:grid-template-rowsgap:gapの値を指定できます。rowGap:row-gapの値を指定できます。columnGap:column-gapの値を指定できます。ai:align-itemsの値を指定できます。ac:align-contentの値を指定できます。ji:justify-itemsの値を指定できます。jc:justify-contentの値を指定できます。
Import
import { Grid } from '@loos/lism-core';DEMO
1列 → 2列 → 幅200pxで3列
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Unde ratione blanditiis aperiam sed eos assumenda veniam
Voluptatibus voluptates similique quis, accusamus optio cumque praesentium!
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Unde ratione blanditiis aperiam sed eos assumenda veniam
Voluptatibus voluptates similique quis, accusamus optio cumque praesentium!
リサイズ可能エリアです ↑
<Grid columns={["1fr", "repeat(2, 1fr)", "repeat(3, 200px)"]} jc="center" gap={20}>
...
</Grid>Left, Center, Right にエリア分け
L
Center
R
リサイズ可能エリアです ↑
<Grid
areas={`'L C R'`}
columns="auto 1fr auto"
ai="center"
ji="center"
>
<Item area="L" px={20} bgc="pale">L</Item>
<Item area="C" px={20} bgc="pale">Center</Item>
<Item area="R" px={20} bgc="pale">R</Item>
</Grid>コンテナサイズでエリア位置を切り替える
Left
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Unde ratione blanditiis aperiam sed eos assumenda veniam, culpa sint qui enim rerum doloribus quod dolor deleniti?
Right
リサイズ可能エリアです ↑
<Grid
areas={[
`'top bottom'
'L R'`,
`'L top R'
'L bottom R'`,
]}
columns={["1fr 1fr", "5em 1fr 5em"]}
gap={20}
>
<Item area="L" p={20} bgc="pale">
Left
</Item>
<Item area="A">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</Item>
<Item area="B">
Unde ratione blanditiis aperiam sed eos assumenda veniam, culpa sint qui enim rerum
doloribus quod dolor deleniti?
</Item>
<Item area="R" p={20} bgc="pale">
Right
</Item>
</Grid>Grid Item について
Gridの子要素に対するGridオプションを指定する方法は以下のページを参考にしてください。