FluidCols

プロパティ	説明
`cols` `--cols`	カラムが維持する最小幅を指定します。
`autoFill` `--autoMode`	自動折り返しのモードを`auto-fill`に切り替えます。

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

↓

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

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

リサイズ可能

<FluidCols g='15'>
  <Box bxsh='20' p='20'><Dummy lang='ja'/></Box>
  <Box bxsh='20' p='20'><Dummy lang='ja' offset='1' /></Box>
  <Box bxsh='20' p='20'><Dummy lang='ja'/></Box>
  <Box bxsh='20' p='20'><Dummy lang='ja' offset='2' /></Box>
  <Box bxsh='20' p='20'><Dummy lang='ja' length='s' /></Box>
  <Box bxsh='20' p='20'><Dummy lang='ja' /></Box>
</FluidCols>

↓

cols=12em, auto-fillを使う

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

リサイズ可能

<FluidCols cols='12rem' autoFill g='20' fz='s'>
  <Box bxsh='20' p='20'><Dummy lang='ja' length='s' /></Box>
  <Box bxsh='20' p='20'><Dummy lang='ja' offset='1' /></Box>
  <Box bxsh='20' p='20'><Dummy lang='ja' length='s' /></Box>
</FluidCols>

↓

2列→1列

リサイズ可能

<FluidCols cols='320px' g='20'>
  <Frame ar='16/9' ><img src="https://cdn.lism-css.com/img/a-1.jpg" width="600" height="400" /></Frame>
  <Frame ar='16/9' ><img src="https://cdn.lism-css.com/img/a-3.jpg" width="600" height="400" /></Frame>
</FluidCols>

FluidCols

Props

CSS

Import

Usage