Cluster

複数の要素を横方向に連続的に並べて配置し、数が多ければ折り返すレイアウトモジュールです。

CSS

Import

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

Usage

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

↓

シンプルな<Cluster>の例

Lorem

ipsum

Dolor

Sit amet

Consectetur

Adipisicing

Elit

Quisquam

Quos

リサイズ可能

<Cluster g='20'>
  <Lism bd px='10' bdrs='10'>Lorem</Lism>
  <Lism bd px='10' bdrs='10'>ipsum</Lism>
  <Lism bd px='10' bdrs='10'>Dolor</Lism>
  <Lism bd px='10' bdrs='10'>Sit amet</Lism>
  <Lism bd px='10' bdrs='10'>Consectetur</Lism>
  <Lism bd px='10' bdrs='10'>Adipisicing</Lism>
  <Lism bd px='10' bdrs='10'>Elit</Lism>
  <Lism bd px='10' bdrs='10'>Quisquam</Lism>
  <Lism bd px='10' bdrs='10'>Quos</Lism>
</Cluster>

<div class="l--cluster -g:20">
  <span class="-bd -px:10 -bdrs:10">Lorem</span>
  <span class="-bd -px:10 -bdrs:10">ipsum</span>
  <span class="-bd -px:10 -bdrs:10">Dolor</span>
  <span class="-bd -px:10 -bdrs:10">Sit amet</span>
  <span class="-bd -px:10 -bdrs:10">Consectetur</span>
  <span class="-bd -px:10 -bdrs:10">Adipisicing</span>
  <span class="-bd -px:10 -bdrs:10">Elit</span>
  <span class="-bd -px:10 -bdrs:10">Quisquam</span>
  <span class="-bd -px:10 -bdrs:10">Quos</span>
</div>