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-css';

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>

子要素を重ねて表示する

position:absoluteを使わず、grid-area:1/1(.-ga:1)を利用して要素を重ねる例を紹介します。

↓

Gritの子要素を重ねて表示する

SAMPLE TEXT

<Grid ar='16/9' ji='c' ai='c'>
  <GridItem layout={Frame} ga='1/1' w='100%' h='100%'>
    <Media src='/img/img-1.jpg' op='mid'/>
  </GridItem>
  <Decorator ga='1/1' blur='80px' bgc='white' w='50%' h='4em'/>
  <GridItem ga='1/1' fz='2xl' z='1'>SAMPLE TEXT</GridItem>
</Grid>

<div class="l--grid -ar:16/9 -ji:c -ai:c">
  <div class="l--frame -w:100% -h:100% -ga:1">
    <img class="-op:mid" src="/img/img-1.jpg">
  </div>
  <div class="l--decorator -bgc: -w: -h: -ga:1" style="--bgc:var(--white);--w:50%;--h:4em;filter:blur(80px)" aria-hidden="true"></div>
  <div class="-fz:2xl -z:1 -ga:1">SAMPLE TEXT</div>
</div>

subgridの活用

↓

新着記事一覧リストの作成例

2024.05.31

NEWS

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

2024.05.29

TIPS

トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

2024.05.18

COLUMN

しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

リサイズ可能

<Grid gtc={['auto','auto 1fr']} bd='b'>
  <GridItem layout={Grid} gtc='subgrid' gc='1/-1' g='20' ai='start' bd='t' py='30'>
    <Grid gtc={['auto auto', '1fr 1fr']} g='20' jc='s' ai='c'>
      <Lism fz='xs'>2024.05.31</Lism>
      <Lism d='if' jc='c' bd fz='xs' lh='1' bgc='text' c='base' p='10' bdrs='1'>NEWS</Lism>
    </Grid>
    <Dummy lang='ja' tag='a' href='####' hov='fade' c='inherit' td='n' className='u--trimHL' lh='s' />
  </GridItem>
  <GridItem layout={Grid} gtc='subgrid' gc='1/-1' g='20' ai='start' bd='t' py='30'>
    <Grid gtc={['auto auto', '1fr 1fr']} g='20' jc='s' ai='c'>
      <Lism fz='xs'>2024.05.29</Lism>
      <Lism d='if' jc='c' bd fz='xs' lh='1' bgc='text' c='base' p='10' bdrs='1'>TIPS</Lism>
    </Grid>
    <Dummy lang='ja' offset='1' tag='a' href='####' hov='fade' c='inherit' td='n' length='s' className='u--trimHL' lh='s' />
  </GridItem>
  <GridItem layout={Grid} gtc='subgrid' gc='1/-1' g='20' ai='start' bd='t' py='30'>
    <Grid gtc={['auto auto', '1fr 1fr']} g='20' jc='s' ai='c'>
      <Lism fz='xs'>2024.05.18</Lism>
      <Lism d='if' jc='c' bd fz='xs' lh='1' bgc='text' c='base' p='10' bdrs='1'>COLUMN</Lism>
    </Grid>
    <Dummy lang='ja' offset='2' tag='a' href='####' hov='fade' c='inherit' td='n' className='u--trimHL' lh='s' />
  </GridItem>
</Grid>