FluidCols (l--fluidCols)

l--fluidCols is a breakpoint-independent multi-column class where columns automatically wrap before they shrink below the specified minimum width.

CSS

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

Lism Component

Import

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

Props

Property	Description
`cols` `--cols`	Specifies the minimum width each column should maintain.
`autoFill` `--autoMode`	Switches the auto-wrap mode to `auto-fill`.

Usage

Setting the size with `--cols`

↓

Setting the size with --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>

Using `auto-fill`

In l--fluidCols, you can control the first argument of the repeat() function in grid-template-columns via --autoMode. (The default is auto-fit.)

Setting --autoMode: auto-fill (autoFill) changes the behavior when there are only a few items.

↓

Using cols=12em with auto-fill

auto-fill

auto-fit