FluidCols (l--fluidCols)

l--fluidCols は、カラム要素が指定した幅より小さくならないように自動で折り返す、ブレイクポイントに依存しない段組みクラスです。

CSS

/*
    Memo: オーバーフロー回避のため、 min({cols}, 100%) とする。
*/
.l--fluidCols {
  --cols: 20rem;
  --autoMode: auto-fit;
  display: grid;
  grid-template-columns: repeat(var(--autoMode), minmax(min(var(--cols), 100%), 1fr));
}

Lismコンポーネント

Import

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

専用Props

プロパティ	説明
`cols` `--cols`	カラムが維持する最小幅を指定します。
`autoFill` `--autoMode`	自動折り返しのモードを`auto-fill`に切り替えます。

Usage

`--cols`でサイズを指定する

↓

--colsでサイズを指定する

Item A

Item B

Item C

Item D

Item E

Item F

リサイズ

<FluidCols cols="16em" g="20">
  <Lism as="div" p="20" bd>Item A</Lism>
  <Lism as="div" p="20" bd>Item B</Lism>
  <Lism as="div" p="20" bd>Item C</Lism>
  <Lism as="div" p="20" bd>Item D</Lism>
  <Lism as="div" p="20" bd>Item E</Lism>
  <Lism as="div" p="20" bd>Item F</Lism>
</FluidCols>

<div class="l--fluidCols -g:20" style="--cols: 16em">
  <div class="-p:20 -bd">Item A</div>
  <div class="-p:20 -bd">Item B</div>
  <div class="-p:20 -bd">Item C</div>
  <div class="-p:20 -bd">Item D</div>
  <div class="-p:20 -bd">Item E</div>
  <div class="-p:20 -bd">Item F</div>
</div>

`auto-fill`を使用する

l--fluidColsでは、grid-template-columnsのrepeat関数の第一引数を--autoMode で指定することができます。（デフォルトは auto-fit です。）

--autoMode:auto-fill (autoFill) を指定することで、要素数が少ない時の挙動が代わります。

↓

cols=12em, auto-fill を使用する

auto-fill

auto-fit