Columns

ブレイクポイントごとに指定した列数で表示できるカラムレイアウトを作成します。

Props

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

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

CSS

Import

import { Columns } from 'lism-css/react';

Usage

↓

2列の<Columns>

Box

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Box

リサイズ可能

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

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

1列 → 2列 → 3列

↓

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

Box1

Box2

Box3

Box4

Box5

Box6

リサイズ可能

<Columns cols={[1, 2, 3]} g='20'>
  <Box bgc='base-2' p='20'>Box1</Box>
  <Box bgc='base-2' p='20'>Box2</Box>
  <Box bgc='base-2' p='20'>Box3</Box>
  <Box bgc='base-2' p='20'>Box4</Box>
  <Box bgc='base-2' p='20'>Box5</Box>
  <Box bgc='base-2' p='20'>Box6</Box>
</Columns>

<div class="l--columns -g:20" style="--cols:1;--cols_sm:2;--cols_md:3">
  <div class="l--box -bgc:base-2 -p:20">Box1</div>
  <div class="l--box -bgc:base-2 -p:20">Box2</div>
  <div class="l--box -bgc:base-2 -p:20">Box3</div>
  <div class="l--box -bgc:base-2 -p:20">Box4</div>
  <div class="l--box -bgc:base-2 -p:20">Box5</div>
  <div class="l--box -bgc:base-2 -p:20">Box6</div>
</div>

2列 → 4列

↓

2列 → @md:4列

Box

リサイズ可能

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

gc(grid-column)の活用

↓

1:2, 2:1 で順番にコンテンツを表示

リサイズ可能

<Columns cols='3' g='15'>
  <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 の活用

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

↓

subgrid

Card Title

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Date: 2025-01-01

Card Title Lorem ipsum

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Date: 2025-01-01

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

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Date: 2025-01-01

Card Title

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Date: 2025-01-01

Card Title

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Date: 2025-01-01

リサイズ可能

<Columns cols={[1, 2, 3]} g='15'>
  <Grid className='u-trimItems' g='20' p='20' gtr='subgrid' gr='span 4' 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='s' />
    <Divider my='0' />
    <Lism lh='s' fz='s' o='-10' >Date: 2025-01-01</Lism>
  </Grid>
  <Grid className='u-trimItems' g='20' p='20' gtr='subgrid' gr='span 4' 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='s' length='s' />
    <Divider my='0' />
    <Lism lh='s' fz='s' o='-10' >Date: 2025-01-01</Lism>
  </Grid>
  <Grid className='u-trimItems' g='20' p='20' gtr='subgrid' gr='span 4' 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='s' />
    <Divider my='0' />
    <Lism lh='s' fz='s' o='-10' >Date: 2025-01-01</Lism>
  </Grid>
  <Grid className='u-trimItems' g='20' p='20' gtr='subgrid' gr='span 4' 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='s' length='s' />
    <Divider my='0' />
    <Lism lh='s' fz='s' o='-10' >Date: 2025-01-01</Lism>
  </Grid>
  <Grid className='u-trimItems' g='20' p='20' gtr='subgrid' gr='span 4' 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='s' />
    <Divider my='0' />
    <Lism lh='s' fz='s' o='-10' >Date: 2025-01-01</Lism>
  </Grid>
</Columns>