SwitchColumns (l--switchColumns)

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

CSS

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

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

Lism Component

Import

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

Props

| Prop | Description | |---|---| | breakSize --breakSize | Minimum parent width required to keep the horizontal layout. Accepts sz tokens. |

Usage

Using with the default width

↓

Using with the default width

Box

Resize

<SwitchColumns g="20">
  <Box bgc="base-2" p="20">Box</Box>
  <Box bgc="base-2" p="20">Box</Box>
  <Box bgc="base-2" p="20">Box</Box>
</SwitchColumns>

Custom breakSize

↓

Using with a specified breakSize

Box

Resize

<SwitchColumns breakSize="s" g="20">
  <Box bgc="base-2" p="20">Box</Box>
  <Box bgc="base-2" p="20">Box</Box>
  <Box bgc="base-2" p="20">Box</Box>
</SwitchColumns>

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

Adjusting proportions with flex-grow

↓

Adjusting proportions by specifying flex-grow on child elements

Box

Resize

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