Columns

Creates a column layout that displays content in the specified number of columns at each breakpoint.

Props

Property	Description	Default
`cols` `--cols`	Specifies the number of columns. Breakpoint-based values are also supported.	`2`

You can also use any props available on <Grid>.

CSS

Import

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

Usage

↓

2-column <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 columns

↓

1 col → sm: 2 cols → md: 3 cols

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 columns

↓

2 cols → @md: 4 cols

Box

リサイズ可能

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

Using gc (grid-column)

↓

Alternating 1:2 and 2:1 column spans

リサイズ可能

<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 as='img' /></Frame>
  <Frame gc='span 2'><Dummy as='img' /></Frame>
  <Frame gc='span 2'><Dummy as='img' /></Frame>
  <Frame gc='span 1'><Dummy as='img' /></Frame>
</Columns>

Using subgrid

Creates a card layout using subgrid within a 1 → 2 → 3 column layout.

↓

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--trimChildren' 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--trimChildren' 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--trimChildren' 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--trimChildren' 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--trimChildren' 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>