コンテンツにスキップ
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/react';

Usage

Section titled “Usage”
↓

2列の<Columns>

Box

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.

Box
Box
Box
リサイズ可能 
<Columns cols={2} g='30'>
  <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列 → 2列 → 3列

Section titled “1列 → 2列 → 3列”
↓
1列 → sm:2列 → md:3列
Box1
Box2
Box3
Box4
Box5
Box6
リサイズ可能 
<Columns cols={[1, 2, 3]} g='30'>
  <Box bgc='base-2' p='30'>Box1</Box>
  <Box bgc='base-2' p='30'>Box2</Box>
  <Box bgc='base-2' p='30'>Box3</Box>
  <Box bgc='base-2' p='30'>Box4</Box>
  <Box bgc='base-2' p='30'>Box5</Box>
  <Box bgc='base-2' p='30'>Box6</Box>
</Columns>

2列 → 4列

Section titled “2列 → 4列”
↓
2列 → @md:4列
Box
Box
Box
Box
リサイズ可能 
<Columns cols={[2, null, 4]} g='20'>
  ...
</Columns>

gc(grid-column)の活用

Section titled “gc(grid-column)の活用”
↓
1:2, 2:1 で順番にコンテンツを表示
リサイズ可能 
<Columns cols='3' g='20'>
  <Frame gc='span 2'><img src='https://cdn.lism-css.com/img/a-1.jpg' alt='' /></Frame>
  <Frame gc='span 4'><img src='https://cdn.lism-css.com/img/a-3.jpg' alt='' /></Frame>
  <Frame gc='span 4'><img src='https://cdn.lism-css.com/img/a-4.jpg' alt='' /></Frame>
  <Frame gc='span 2'><img src='https://cdn.lism-css.com/img/a-2.jpg' alt='' /></Frame>
  <Frame gc='span 1'><Dummy tag='img' /></Frame>
  <Frame gc='span 2'><Dummy tag='img' /></Frame>
  <Frame gc='span 2'><Dummy tag='img' /></Frame>
  <Frame gc='span 1'><Dummy tag='img' /></Frame>
</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

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'>
  <Grid className='u-trimItems' g='30' p='30' gtr='subgrid' gr='span 5' bgc='base-2' bdrs='10'>
    <Media ar='og' bdrs='10' src='https://cdn.lism-css.com/img/a-1.jpg'/>
    <HTML.h lv='2' aslf='center' fz='m'>Card Title</HTML.h>
    <Dummy lh='xs' />
    <Divider my='0' />
    <Lism lh='xs' fz='s' o='-10' >Date: 2025-01-01</Lism>
  </Grid>
  <Grid className='u-trimItems' g='30' p='30' gtr='subgrid' gr='span 5' bgc='base-2' bdrs='10'>
    <Media ar='og' bdrs='10' src='https://cdn.lism-css.com/img/a-2.jpg' />
    <HTML.h lv='2' aslf='center' fz='m'>Card Title Lorem ipsum</HTML.h>
    <Dummy lh='xs' length='s' />
    <Divider my='0' />
    <Lism lh='xs' fz='s' o='-10' >Date: 2025-01-01</Lism>
  </Grid>
  <Grid className='u-trimItems' g='30' p='30' gtr='subgrid' gr='span 5' bgc='base-2' bdrs='10'>
    <Media ar='og' bdrs='10' src='https://cdn.lism-css.com/img/a-3.jpg' />
    <HTML.h lv='2' aslf='center' fz='m'>Card Title, long, long, long, very long long looong.</HTML.h>
    <Dummy lh='xs' />
    <Divider my='0' />
    <Lism lh='xs' fz='s' o='-10' >Date: 2025-01-01</Lism>
  </Grid>
  <Grid className='u-trimItems' g='30' p='30' gtr='subgrid' gr='span 5' bgc='base-2' bdrs='10'>
    <Media ar='og' bdrs='10' src='https://cdn.lism-css.com/img/a-4.jpg' />
    <HTML.h lv='2' aslf='center' fz='m'>Card Title</HTML.h>
    <Dummy lh='xs' length='s' />
    <Divider my='0' />
    <Lism lh='xs' fz='s' o='-10' >Date: 2025-01-01</Lism>
  </Grid>
  <Grid className='u-trimItems' g='30' p='30' gtr='subgrid' gr='span 5' bgc='base-2' bdrs='10'>
    <Media ar='og' bdrs='10' src='https://cdn.lism-css.com/img/a-5.jpg' />
    <HTML.h lv='2' aslf='center' fz='m'>Card Title</HTML.h>
    <Dummy lh='xs' />
    <Divider my='0' />
    <Lism lh='xs' fz='s' o='-10' >Date: 2025-01-01</Lism>
  </Grid>
</Columns>