Lism CSS
Search

Columns (l--columns)

l--columns is a column class that displays content in the specified number of columns at each breakpoint.

CSS

/*
    memo: グリッドアイテムにはデフォルトでmin-width: autoが適用され、1frだけだとカラムサイズが揃わないことがあり、minmax() を使う。
*/
.l--columns {
  --cols: 2; // 初期値
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}

Lism Component

Import

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

Props

PropertyDescriptionDefault
cols --cols Specifies the number of columns. Breakpoint-based values are also supported.2

Usage

2-column layout

↓

2-column <Columns>

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

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>

2 → 4 columns

↓
2 cols → @md: 4 cols
Box
Box
Box
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 1">
    <img src="https://cdn.lism-css.com/img/a-1.jpg" alt="" />
  </Frame>
  <Frame gc="span 2">
    <img src="https://cdn.lism-css.com/img/a-3.jpg" alt="" />
  </Frame>
  <Frame gc="span 2">
    <img src="https://cdn.lism-css.com/img/a-4.jpg" alt="" />
  </Frame>
  <Frame gc="span 1">
    <img src="https://cdn.lism-css.com/img/a-2.jpg" alt="" />
  </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.

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 util="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" />
    <Heading level="2" aslf="center" fz="m">
      Card Title
    </Heading>
    <Text lh="s">
      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.
    </Text>
    <Divider my="0" />
    <Lism lh="s" fz="s" o="-10">
      Date: 2025-01-01
    </Lism>
  </Grid>
  <Grid util="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" />
    <Heading level="2" aslf="center" fz="m">
      Card Title Lorem ipsum
    </Heading>
    <Text lh="s">Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</Text>
    <Divider my="0" />
    <Lism lh="s" fz="s" o="-10">
      Date: 2025-01-01
    </Lism>
  </Grid>
  <Grid util="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" />
    <Heading level="2" aslf="center" fz="m">
      Card Title, long, long, long, very long long looong.
    </Heading>
    <Text lh="s">
      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.
    </Text>
    <Divider my="0" />
    <Lism lh="s" fz="s" o="-10">
      Date: 2025-01-01
    </Lism>
  </Grid>
  <Grid util="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" />
    <Heading level="2" aslf="center" fz="m">
      Card Title
    </Heading>
    <Text lh="s">Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</Text>
    <Divider my="0" />
    <Lism lh="s" fz="s" o="-10">
      Date: 2025-01-01
    </Lism>
  </Grid>
  <Grid util="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" />
    <Heading level="2" aslf="center" fz="m">
      Card Title
    </Heading>
    <Text lh="s">
      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.
    </Text>
    <Divider my="0" />
    <Lism lh="s" fz="s" o="-10">
      Date: 2025-01-01
    </Lism>
  </Grid>
</Columns>

© Lism CSS. All rights reserved.

TOC