RatioGrid
子要素のサイズ比率（1:2や1:1:2など）を指定して配置できるグリッドモジュールです。
対応するHTML構造
<div class="l--ratioGrid" style="--gtc:{ratio}">...</div>Props
ratio: 要素のサイズ比率を指定します。ブレイクポイント指定可能です。- その他、
<Grid>で使えるpropsが使えます。
Import
import { RatioGrid } from '@loos/lism-core';DEMO
1:2の比率でコンテンツを表示
1
2
リサイズ可能エリアです ↑
<RatioGrid ratio="1:2">
<Box bgc="hsl(210 40% 90%)">1</Box>
<Box bgc="hsl(100 40% 90%)">2</Box>
</RatioGrid>黄金比( 1:1.618 ) の比率でコンテンツを表示
1
2
リサイズ可能エリアです ↑
<RatioGrid ratio="1:1.618">
<Box bgc="hsl(210 40% 90%)">1</Box>
<Box bgc="hsl(100 40% 90%)">2</Box>
</RatioGrid>1:1:2 の比率でコンテンツを表示
1
2
3
4
5
6
リサイズ可能エリアです ↑
<RatioGrid ratio="1:1:2" gap={[10, 15]}>
<Box bgc="hsl(210 40% 90%)">1</Box>
<Box bgc="hsl(100 40% 90%)">2</Box>
<Box bgc="hsl(20 40% 90%)">3</Box>
<Box bgc="hsl(210 40% 90%)">4</Box>
<Box bgc="hsl(100 40% 90%)">5</Box>
<Box bgc="hsl(20 40% 90%)">6</Box>
</RatioGrid>1:1 → @sm: 2:3 → @md: 1:2 で比率を切り替える
1
2
リサイズ可能エリアです ↑
<RatioGrid ratio={["1:1", "2:3", "1:2"]} gap={20}>
<Box bgc="hsl(210 40% 90%)">1</Box>
<Box bgc="hsl(100 40% 90%)">2</Box>
</RatioGrid>1:2 → @md: 1:2:1:2 で比率を切り替える
1
2
3
4
5
6
7
8
リサイズ可能エリアです ↑
<RatioGrid ratio={["1", "1:2", "1:2:1:2"]} gap={20}>
<Box bgc="hsl(210 40% 90%)">1</Box>
<Box bgc="hsl(100 40% 90%)">2</Box>
<Box bgc="hsl(210 40% 90%)">3</Box>
<Box bgc="hsl(100 40% 90%)">4</Box>
<Box bgc="hsl(210 40% 90%)">5</Box>
<Box bgc="hsl(100 40% 90%)">6</Box>
<Box bgc="hsl(210 40% 90%)">7</Box>
<Box bgc="hsl(100 40% 90%)">8</Box>
</RatioGrid>