GridItem

Gridの子要素向けのプロパティを扱いやすくするためのコンポーネントです。

Props

プロパティ	説明
`layout`	展開したい Lismコンポーネントを指定できます。

また、本来は gridItemオブジェクト内で指定できるプロパティをコンポーネントに直接指定できるようになっています。

Prop	CSS
`ga`	`grid-area`
`gc`	`grid-column`
`gr`	`grid-row`
`gcs`	`grid-column-start`
`grs`	`grid-row-start`
`gce`	`grid-column-end`
`gre`	`grid-row-end`

↓

例えば、以下は同じ出力結果になります。

// 1.
<Lism gridItem={{'ga': 'areaName'}}>...</Lism>

// 2.
<GridItem ga='areaName'>...</GridItem>

Import

import { Grid, GridItem } from '@lism-ui/core';

Usage

↓

例

item1

item2

item3

item4

item5

item6

リサイズ可能

<Grid variant='repeat' cols='3' rows='3' g='5'>
  <GridItem p='20' bgc='base-2'>item1</GridItem>
  <GridItem p='20' bgc='base-2'>item2</GridItem>
  <GridItem p='20' bgc='base-2'>item3</GridItem>
  <GridItem p='20' bgc='base-2'>item4</GridItem>
  <GridItem p='20' bgc='base-2' gc='span 2'>item5</GridItem>
  <GridItem layout={Center} gc='3' gr='1 / -1' p='20' bgc='blue'>item6</GridItem>
</Grid>