FluidCols

Property	Description
`cols` `--cols`	Specifies the minimum width each column should maintain.
`autoFill` `--autoMode`	Switches the auto-wrap mode to `auto-fill`.

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

↓

Using the default column width

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

↓

Using cols=12em with 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 columns → 1 column

リサイズ可能

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

Props

CSS

Import

Usage