SwitchCols

A layout that switches between multi-column and single-column without using media queries.

Props

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

CSS

Import

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

Usage

↓

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>

↓

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 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>