Columns

プロパティ	説明	デフォルト値
`cols` `--cols`	列数を指定します。ブレイクポイント指定も可能です。	`2`

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

↓

2列の<Columns>

Box

リサイズ可能

<Columns cols={2} g='20'>
  <Box bgc='base-2' p='30'>Box</Box>
  <Box bgc='base-2' p='30'>Box</Box>
  <Box bgc='base-2' p='30'>Box</Box>
  <Box bgc='base-2' p='30'>Box</Box>
</Columns>

<div class="l--columns -g:20" style="--cols:2">
  <div class="l--box -bgc:base-2 -p:30">Box</div>
  <div class="l--box -bgc:base-2 -p:30">Box</div>
  <div class="l--box -bgc:base-2 -p:30">Box</div>
  <div class="l--box -bgc:base-2 -p:30">Box</div>
</div>

↓

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

Box

リサイズ可能

<Columns cols={[1, 2, 3]} g='20'>
  <Box bgc='base-2' p='30'>Box</Box>
  <Box bgc='base-2' p='30'>Box</Box>
  <Box bgc='base-2' p='30'>Box</Box>
  <Box bgc='base-2' p='30'>Box</Box>
  <Box bgc='base-2' p='30'>Box</Box>
  <Box bgc='base-2' p='30'>Box</Box>
</Columns>

<div class="l--columns -g:20" style="--cols:1;--sm-cols:2;--md-cols:3">
  <div class="l--box -bgc:base-2 -p:30">Box</div>
  <div class="l--box -bgc:base-2 -p:30">Box</div>
  <div class="l--box -bgc:base-2 -p:30">Box</div>
  <div class="l--box -bgc:base-2 -p:30">Box</div>
  <div class="l--box -bgc:base-2 -p:30">Box</div>
  <div class="l--box -bgc:base-2 -p:30">Box</div>
</div>

↓

2列 → @md:4列

Box

リサイズ可能

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

↓

デフォルト (colSize=16rem)

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

リサイズ可能

<Columns variant='liquid'>
  ...
</Columns>

↓

colSize=8rem

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

リサイズ可能

<Columns variant='liquid'>
  ...
</Columns>

Columns

Props

Import

Usage

Variants

`variant='liquid'`