コンテンツにスキップ
Lism CSS

Columns

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

Props

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

その他、<Grid>で使えるpropsが使えます。

CSS

Section titled “CSS”

Import

Section titled “Import”
import { Columns } from 'lism-css';

Usage

Section titled “Usage”
↓

2列の<Columns>

Box
Box
Box
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>
↓

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

Box
Box
Box
Box
Box
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>
↓
2列 → @md:4列
Box
Box
Box
Box
リサイズ可能 
<Columns cols={[2, null, 4]} g='20'>
  ...
</Columns>

Variants

Section titled “Variants”

variant='liquid'

Section titled “variant='liquid'”

列数を指定せず、子要素が指定した幅より小さくならないように自動で折り返しされるカラムレイアウトを作成します。

子要素が維持する最小幅はcolSize(--col-size) で指定できます。（デフォルトは16remです）。

↓

デフォルト (colSize=16rem)

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

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

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

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

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

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

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

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.

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

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

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>

subgrid の利用例

Section titled “subgrid の利用例”

1→2→3列のカラムレイアウトで、subgridを利用したカードコンテンツを作成します。

↓
subgrid

Card Title

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

Date: 2025-01-01

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Date: 2025-01-01

Card Title, long, long, long, very long long looong.

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

Date: 2025-01-01

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Date: 2025-01-01

Card Title

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

Date: 2025-01-01
リサイズ可能 
<Columns cols={[1, 2, 3]} g='20'>
  <GridItem layout={Grid} g='30' p='30' gtr='subgrid' gr='span 5' bgc='base-2' bdrs='2'>
    <Text className='u--trimHL' tag='h2' fz='m'>Card Title</Text>
    <Media ar='ogp' bdrs='2' src='/img/img-1.jpg'/>
    <Dummy className='u--trimHL' lh='xs' />
    <Divider />
    <Lism className='u--trimHL' lh='xs' fz='s' op='high' >Date: 2025-01-01</Lism>
  </GridItem>
  <GridItem layout={Grid} g='30' p='30' gtr='subgrid' gr='span 5' bgc='base-2' bdrs='2'>
    <Text className='u--trimHL' tag='h2' fz='m'>Card Title</Text>
    <Media ar='ogp' bdrs='2' src='/img/img-2.jpg' />
    <Dummy className='u--trimHL' lh='xs' length='s' />
    <Divider />
    <Lism className='u--trimHL' lh='xs' fz='s' op='high' >Date: 2025-01-01</Lism>
  </GridItem>
  <GridItem layout={Grid} g='30' p='30' gtr='subgrid' gr='span 5' bgc='base-2' bdrs='2'>
    <Text className='u--trimHL' tag='h2' fz='m'>Card Title, long, long, long, very long long looong.</Text>
    <Media ar='ogp' bdrs='2' src='/img/img-3.jpg' />
    <Dummy className='u--trimHL' lh='xs' />
    <Divider />
    <Lism className='u--trimHL' lh='xs' fz='s' op='high' >Date: 2025-01-01</Lism>
  </GridItem>
  <GridItem layout={Grid} g='30' p='30' gtr='subgrid' gr='span 5' bgc='base-2' bdrs='2'>
    <Text className='u--trimHL' tag='h2' fz='m'>Card Title</Text>
    <Media ar='ogp' bdrs='2' src='/img/img-4.jpg' />
    <Dummy className='u--trimHL' lh='xs' length='s' />
    <Divider />
    <Lism className='u--trimHL' lh='xs' fz='s' op='high' >Date: 2025-01-01</Lism>
  </GridItem>
  <GridItem layout={Grid} g='30' p='30' gtr='subgrid' gr='span 5' bgc='base-2' bdrs='2'>
    <Text className='u--trimHL' tag='h2' fz='m'>Card Title</Text>
    <Media ar='ogp' bdrs='2' src='/img/img-5.jpg' />
    <Dummy className='u--trimHL' lh='xs' />
    <Divider />
    <Lism className='u--trimHL' lh='xs' fz='s' op='high' >Date: 2025-01-01</Lism>
  </GridItem>
</Columns>