Columns

指定した列数でカラムレイアウトを作成します。

対応するHTML構造

<div class="l--columns" style="--gtc:{cols}">...</div>

Props

cols: 列数を指定します。ブレイクポイント指定可能です。
その他、<Grid>で使えるpropsが使えます。

Import

import { Columns } from '@loos/lism-core';

DEMO

2列の<Columns>

Box

リサイズ可能エリアです ↑

<Columns cols={2} gap={20}>
	<Box bgc="pale" p="box">Box</Box>
	<Box bgc="pale" p="box">Box</Box>
	<Box bgc="pale" p="box">Box</Box>
	<Box bgc="pale" p="box">Box</Box>
</Columns>

2列 → @md:4列

Box

リサイズ可能エリアです ↑

<Columns cols={[2, null, 4]} gap={20}>
	...
</Columns>

1列 → sm:2列 → md:3列

Box

リサイズ可能エリアです ↑

<Columns cols={[1, 2, 3]} gap={20}>
	...
</Columns>

2列 → 3列 → 4列 → 6列

Box

リサイズ可能エリアです ↑

<Columns cols={[2, 3, 4, 6]} gap={20}>
	...
</Columns>

Grid RatioGrid