Lism Tips

l--columns（同じ幅の列に分ける）

l--columns は、中の要素を同じ幅の列に分けて並べるクラスです。列の数は --cols で決め、幅ごとに変えられます。

l--columns は、中の要素を同じ幅の列に分けて並べるためのクラスです。何列にするかを --cols という変数で決めます。何も指定しなければ 2 列です。

どんなときに使う？#

  • カードや写真を「2列」「3列」のように、きっちり同じ幅でそろえたいとき
  • スマートフォンでは1列、広い画面では3列、のように列の数を切り替えたいとき

列の数ではなく「1つの幅は最低これだけ」で決めたいなら l--autoColumns が向いています。列ごとに違う幅にしたいなら l--grid を使います。

使い方#

箱に l--columns を付け、style="--cols: 2" のように列の数を入れます。入れた要素は左から順にマスへ入り、はみ出したぶんは次の段へ回ります。

表示例

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

専用の変数#

変数 決めること 初期値
--cols 列の数 2

--cols は幅ごとに変えられます。-cols_sm・-cols_md などのクラスを付け、--cols_sm・--cols_md に値を入れます。

幅で列の数を変える#

下の例は、せまい画面では1列、広いとき（_sm）では3列になります。

補足

_sm・_md などは、画面の幅ではなく、先祖（外側）にある is--container（コンテナ）の幅で切り替わります。先祖に is--container が無いと切り替わりません。くわしくは is--container（幅の基準になる箱） と 画面の幅で切り替える（レスポンシブ） にあります。

表示例

1
2
3
html
<div class="l--columns -cols_sm -g:15" style="--cols: 1; --cols_sm: 3">
  <div class="l--box -bgc:base-2 -p:20">1</div>
  <div class="l--box -bgc:base-2 -p:20">2</div>
  <div class="l--box -bgc:base-2 -p:20">3</div>
</div>

段階を増やすこともできます。たとえば「1列 → 2列 → 3列」なら、次のように書きます。

html
<div class="l--columns -cols_sm -cols_md -g:20" style="--cols: 1; --cols_sm: 2; --cols_md: 3">
  ...
</div>

途中の段を飛ばして「2列のまま、_md から4列」にしたいときは、-cols_md だけを付けます。

html
<div class="l--columns -cols_md -g:15" style="--cols: 2; --cols_md: 4">...</div>

2マスぶん使う要素を混ぜる#

子要素に -gc（grid-column の略。横に何マス使うか）を付けると、1つの要素だけ広くできます。span 2 は「2マスぶん」という意味です。

表示例

html
<div class="l--columns -g:15" style="--cols: 3">
  <div class="l--frame -gc -ar:1/1" style="--gc: span 1"><img src="/img/sample-square.svg" alt=""></div>
  <div class="l--frame -gc" style="--gc: span 2"><img src="/img/sample-landscape.svg" alt=""></div>
  <div class="l--frame -gc" style="--gc: span 2"><img src="/img/sample-landscape.svg" alt=""></div>
  <div class="l--frame -gc -ar:1/1" style="--gc: span 1"><img src="/img/sample-square.svg" alt=""></div>
</div>

subgrid でカードの中身をそろえる#

カードを並べると、題の長さがちがうせいで、本文や日付の高さがずれることがあります。各カードを l--grid -gtr:subgrid にして、--gr: span 3 で親の3行ぶんを使わせると、カードどうしで行の高さがそろいます（subgrid は、親の Grid の線を子がそのまま使うしくみです）。

表示例

短い題

本文です。

2025-01-01
2行になるくらい長い題が入ったカード

本文です。題が長くても、下の日付の線はとなりとそろいます。

2025-01-01
html
<div class="l--columns -cols_sm -g:20" style="--cols: 1; --cols_sm: 2">
  <div class="l--grid -gtr:subgrid -gr -g:15 -p:20 -bgc:base-2 -bdrs:10" style="--gr: span 3">
    <div class="-fz:l">短い題</div>
    <p>本文です。</p>
    <div class="-bd-t -fz:s -pt:10">2025-01-01</div>
  </div>
  <div class="l--grid -gtr:subgrid -gr -g:15 -p:20 -bgc:base-2 -bdrs:10" style="--gr: span 3">
    <div class="-fz:l">2行になるくらい長い題が入ったカード</div>
    <p>本文です。題が長くても、下の日付の線はとなりとそろいます。</p>
    <div class="-bd-t -fz:s -pt:10">2025-01-01</div>
  </div>
</div>

l--columns のしくみ#

l--columns が付ける CSS は次のとおりです。1fr だけだと中身の長さで列の幅がずれることがあるので、minmax(0, 1fr) にして幅をそろえています。

scss
.l--columns {
  --cols: 2; // 初期値
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}

React・Astro で書く場合#

コンポーネントでは <Columns> を使い、列の数は cols で渡します。配列にすると幅ごとの値になり、null の段は飛ばされます。

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

<Columns cols={[1, 2, 3]} g="20">
  <Box>Box1</Box>
  <Box>Box2</Box>
  <Box>Box3</Box>
</Columns>

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

Astro では lism-css/astro から読み込みます。書き方は Lism コンポーネント（React・Astro） にまとめています。

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧