⚠️ Still in β. Lightモードで御覧ください。
Docs
Components
TileGrid

TileGrid

各子要素が指定した最小幅を下回らないように自動で折り返しされるグリッドモジュールです。

カラムの折返しタイミングがブレイクポイントに依存しません。

ただし、カラム数は1列ずつしか変わらない( 4列→2列 とかはできず、4列→3列→2列になる ) ので、カラム数を具体的に指定したい場合は <Columns> を使ってください。

対応するHTML構造
<div class="l--tileGrid">...</div>

主なprops

  • itemMinW: 子要素が最低限維持する幅. デフォルト値は 20rem (要検討)
  • その他、<Grid>で使えるpropsが使えます。
    • gapの初期値を 20 にセットしています。

Import

import { TileGrid } from '@loos/lism-core';

DEMO

デフォルト (itemMinW=16rem

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

リサイズ可能エリアです ↑
<TileGrid>
	...
</TileGrid>

子要素の最低限維持する幅を12rem

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

リサイズ可能エリアです ↑
<TileGrid itemMinW="12rem">
	...
</TileGrid>