TileGrid
各子要素が指定した最小幅を下回らないように自動で折り返しされるグリッドモジュールです。
カラムの折返しタイミングがブレイクポイントに依存しません。
ただし、カラム数は1列ずつしか変わらない( 4列→2列 とかはできず、4列→3列→2列になる ) ので、カラム数を具体的に指定したい場合は <Columns>
を使ってください。
<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>