SwitchCols (l--switchCols)

l--switchCols is a class that switches between multi-column and single-column without using container queries or media queries.

CSS

.l--switchCols {
  --breakSize: var(--sz--xs); /* 横並びを維持する幅（親のサイズで指定する） */
  display: flex;
  flex-wrap: wrap;
}

.l--switchCols > * {
  flex-grow: 1;
  flex-basis: calc((var(--breakSize) - 100%) * 9999);
}

Lism Component

Import

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

Props

Property	Description
`breakSize` `--breakSize`	Specifies the parent width required to maintain the horizontal layout. Accepts sz tokens.

Usage

Using with the default width

↓

Using with the default width

Box

リサイズ可能

<SwitchCols g="20">
  <div class="-bgc:base-2 -p:20">Box</div>
  <div class="-bgc:base-2 -p:20">Box</div>
  <div class="-bgc:base-2 -p:20">Box</div>
</SwitchCols>

Specifying breakSize

↓

Using with a specified breakSize

Box

リサイズ可能

<SwitchCols breakSize="s" g="20">
  <div class="-bgc:base-2 -p:20">Box</div>
  <div class="-bgc:base-2 -p:20">Box</div>
  <div class="-bgc:base-2 -p:20">Box</div>
</SwitchCols>

<div class="l--switchCols -g:20" style="--breakSize: var(--sz--s)">
  <div class="-bgc:base-2 -p:20">Box</div>
  <div class="-bgc:base-2 -p:20">Box</div>
  <div class="-bgc:base-2 -p:20">Box</div>
</div>

Adjusting proportions with flex-grow

↓

Adjusting proportions by specifying flex-grow on child elements

Box

リサイズ可能

<SwitchCols breakSize="s" g="20">
  <div class="-bgc:base-2 -p:20">Box</div>
  <div class="-bgc:base-2 -p:20" style={{ flexGrow: 2 }}>
    Box
  </div>
</SwitchCols>