grid Props

LismでGridレイアウトを使用する方法は大きく分けて2パターンあります。

1. 専用の<Grid>(.l--grid）モジュール、またはその派生系モジュール（ColumnsやTileGridなど）を使う。
2. Lismコンポーネントにd="grid"を指定して単純にdisplay:gridを適用する。（.-d:gクラスが出力されます。）

DEMO

<Grid gap={20}>
	<p>A</p>
	<p>B</p>
	<p>C</p>
</Grid>

Gridオプションの指定方法について

Lismコンポーネントでは grid Propにオブジェクト形式でflexの各オプションを指定でき、<Grid>系コンポーネントではgridを使わずに直接コンポーネントにPropsを指定できます。

<Grid>, <Columns>, <RatioGrid>

• areas: grid-template-areas の値を指定できます。
• columns: grid-template-columns
• rows: grid-template-rows
• gap: gap の値を指定できます。
• rowGap: row-gap の値を指定できます。
• columnGap: column-gap の値を指定できます。
• ai: align-items の値を指定できます。
• ac: align-content の値を指定できます。
• ji: justify-items の値を指定できます。
• jc: justify-content の値を指定できます。

<Grid columns="1fr 1fr 1fr" gap={20}>
	...
</Grid>

<Box d="grid" grid={{ columns: "1fr 1fr 1fr", gap: 20 }}>
	...
</Box>

GridItemの指定

gridの子要素で使用できるプロパティは、gridItem にオブジェクト形式で指定するか、もしくは、<Item>コンポーネントを使うことでコンポーネントに直接指定できます。

• ga: grid-area の値を指定できます。
• gc: grid-column の値を指定できます。
• gr: grid-row の値を指定できます。
• alignSelf: align-self の値を指定できます。
• justifySelf: justify-self の値を指定できます。
• order

<Grid columns="1fr 1fr" gap={20}>
	<Item>コンテンツ</Item>
	<Item>コンテンツ</Item>
	<Item column="span 2">コンテンツ</Item>
</Grid>

<Grid columns="1fr 1fr" gap={20}>
	<Box>コンテンツ</Box>
	<Box>コンテンツ</Box>
	<Box gridItem={{ column: "span 2" }}>コンテンツ</Box>
</Grid>

BP対応props

デフォルトで、以下のPropsはBP指定が可能です。

• ...

<Grid
	columns={["1fr 1fr", "1fr 1fr 1fr"]}
	gap={20}
>
	<Item>コンテンツ</Item>
	<Item column={[null, "span 2"]}>コンテンツ</Item>
	<Item column={["span 2", "span 3"]}>コンテンツ</Item>
</Grid>