Lism Tips

l--autoColumns（列の数を自動で決める）

l--autoColumns は、1列の最小の幅を決めておくと、入るだけ列を並べて自動で折り返すクラスです。

l--autoColumns は、1つの列の最小の幅を決めておくと、入るだけ横に並べて、入らなくなったら次の段へ折り返すクラスです。列の数は、箱の幅から自動で決まります。画面の幅ごとの指定（ブレイクポイント）を書かなくても、せまい画面では列が減ります。

どんなときに使う？#

  • カードや商品の一覧を、画面の幅に合わせて自然に並べたいとき
  • 「1枚の幅はこれより小さくしたくない」という目安があるとき

列の数をきっちり決めたいなら l--columns を使います。

使い方#

箱に l--autoColumns を付け、--cols に1列の最小の幅を入れます。何も入れなければ 20rem です。下の例は 8em なので、表示例の幅が広いと4〜5列、スマートフォンでは2列ほどになります。

表示例

A
B
C
D
E
F
html
<div class="l--autoColumns -g:15" style="--cols: 8em">
  <div class="-p:20 -bd">A</div>
  <div class="-p:20 -bd">B</div>
  <div class="-p:20 -bd">C</div>
  <div class="-p:20 -bd">D</div>
  <div class="-p:20 -bd">E</div>
  <div class="-p:20 -bd">F</div>
</div>

専用の変数#

変数 決めること 初期値
--cols 1列の最小の幅 20rem
--autoMode 余った幅の扱い方（auto-fill か auto-fit） auto-fill

auto-fill と auto-fit のちがい#

ちがいが出るのは、要素の数が少なくて、横に余りができるときです。

  • auto-fill（初期値）：空いたところにも見えない列を残します。要素は最小の幅に近いまま、左に寄ります
  • auto-fit：空いた列をなくし、ある要素だけで横いっぱいに広がります

表示例

auto-fill
auto-fill
auto-fit
auto-fit
html
<div class="l--stack -g:20">
  <div class="l--autoColumns -g:15 -fz:s" style="--cols: 8em">
    <div class="-p:20 -bd">auto-fill</div>
    <div class="-p:20 -bd">auto-fill</div>
  </div>
  <div class="l--autoColumns -g:15 -fz:s" style="--cols: 8em; --autoMode: auto-fit">
    <div class="-p:20 -bd">auto-fit</div>
    <div class="-p:20 -bd">auto-fit</div>
  </div>
</div>

スマートフォンの幅では、どちらも2つで横がうまるので、同じ見た目になります。

l--autoColumns のしくみ#

l--autoColumns が付ける CSS は次のとおりです。min(var(--cols), 100%) にしてあるので、箱が --cols よりせまくても、はみ出さずに箱の幅に収まります。

scss
.l--autoColumns {
  --cols: 20rem;
  --autoMode: auto-fill;
  display: grid;
  grid-template-columns: repeat(var(--autoMode), minmax(min(var(--cols), 100%), 1fr));
}

React・Astro で書く場合#

コンポーネントでは <AutoColumns> を使います。

Props 出す変数 決めること
cols --cols 1列の最小の幅
autoFit --autoMode 付けると auto-fit になる
jsx
import { AutoColumns, Lism } from 'lism-css/react';

<AutoColumns cols="12em" autoFit g="20">
  <Lism as="div" p="20" bd>auto-fit</Lism>
  <Lism as="div" p="20" bd>auto-fit</Lism>
</AutoColumns>

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

関連するページ#

公式ドキュメント

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

ページの一覧