SwitchCols

複数列以上↔︎1列への切り替えをメディアクエリを使わずに実装するレイアウトです。

Props

プロパティ	説明
`breakSize` `--breakSize`	横並びを維持するのに必要な幅（親のサイズ）を指定できます。szトークンの指定ができます。

CSS

Import

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

Usage

↓

デフォルト幅で利用する例

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>

↓

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>

↓

子要素にflex-growを指定して比率を調整する例

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>