TileGrid

A component for creating uniform tile-style grid layouts by specifying cols (number of columns) and rows (number of rows).

Internally, it uses grid-template: repeat(rows, 1fr) / repeat(cols, 1fr).

Props

Property	Description	Default
`cols` `--cols`	Specifies the number of columns. Breakpoint-specific values are supported.	`1`
`rows` `--rows`	Specifies the number of rows. Breakpoint-specific values are supported.	`1`

Other props available on <Grid> can also be used.

CSS

Import

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

Usage

↓

3-column x 3-row tile grid

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>

Breakpoint-specific values

Both cols and rows support breakpoint-specific values.

↓

Example

リサイズ可能

<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>