TileGrid

cols（列数）とrows（行数）を指定して、均等なタイル型グリッドレイアウトを構成するためのコンポーネントです。

内部的には grid-template: repeat(rows, minmax(0, 1fr)) / repeat(cols, minmax(0, 1fr)) を使用しています。

Props

プロパティ	説明	デフォルト値
`cols` `--cols`	列数を指定します。ブレイクポイント指定も可能です。	`1`
`rows` `--rows`	行数を指定します。ブレイクポイント指定も可能です。	`1`

その他、<Grid>で使えるpropsが使えます。

CSS

Import

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

Usage

↓

3列 x 3行のタイルグリッド

item1

item2

item3

item4

item5

item6

リサイズ可能

<TileGrid cols="3" rows="3" g="5" min-h="50svh">
  <Box p="20" bgc="base-2">
    item1
  </Box>
  <Box p="20" bgc="base-2">
    item2
  </Box>
  <Box p="20" bgc="base-2">
    item3
  </Box>
  <Box p="20" bgc="base-2">
    item4
  </Box>
  <Box p="20" bgc="base-2" gc="span 2">
    item5
  </Box>
  <Center gc="3" gr="1 / -1" p="20" bgc="blue">
    item6
  </Center>
</TileGrid>

<div class="l--tileGrid -g:5" style="--cols: 3; --rows: 3; min-height: 50svh">
  <div class="l--box -bgc:base-2 -p:20">item1</div>
  <div class="l--box -bgc:base-2 -p:20">item2</div>
  <div class="l--box -bgc:base-2 -p:20">item3</div>
  <div class="l--box -bgc:base-2 -p:20">item4</div>
  <div class="l--box -bgc:base-2 -p:20 -gc:span 2">item5</div>
  <div class="l--center -p:20 -bgc:blue" style="grid-column: 3; grid-row: 1 / -1">item6</div>
</div>

ブレイクポイント指定

cols、rows はそれぞれブレイクポイント指定が可能です。

↓

例

リサイズ可能

<TileGrid cols={['2', '3']} rows="4" min-h="50svh" gaf="row dense">
  <Box gc={['1 / -1', 'span 2']} gr={['span 2', '1 / -1']} p="20" bgc="base-2">
    A
  </Box>
  <Box p="20" bgc="green:20%">
    B
  </Box>
  <Box p="20" bgc="blue:20%">
    C
  </Box>
  <Box p="20" bgc="red:20%">
    D
  </Box>
  <Box p="20" bgc="purple:20%">
    E
  </Box>
</TileGrid>