Columns

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

Props

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

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

CSS

Import

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

Usage

↓

2列の<Columns>

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.

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

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>