Lism CSS
検索

Columns (l--columns)

l--columns は、ブレイクポイントごとに指定した列数で表示できるカラムクラスです。

CSS

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

Lismコンポーネント

Import

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

専用Props

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

Usage

2列レイアウト

↓

2列の<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列

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

2列 → 4列

↓
2列 → @md:4列
Box
Box
Box
Box
リサイズ 
<Columns cols={[2, null, 4]} g="15">
  ...
</Columns>

gc(grid-column)の活用

↓
1:2, 2:1 で順番にコンテンツを表示
リサイズ 
<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>

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

目次