Grid

コンテンツをGridレイアウトで配置するためのコンポーネントです。

Import

import { Grid, Box } from 'lism-css/react';

Props

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

Prop	CSS
`gd`	`grid`
`gt`	`grid-template`
`gta`	`grid-template-areas`
`gtc`	`grid-template-columns`
`gtr`	`grid-template-rows`
`gaf`	`grid-auto-flow`
`gar`	`grid-auto-rows`
`gac`	`grid-auto-columns`

Usage

↓

1:1 → @smで1:2 の比率でコンテンツを表示

リサイズ可能

<Grid gtc={['1fr 1fr', '1fr 2fr']}>
  <Box p='30' bgc='blue:20%'>A</Box>
  <Box p='30' bgc='purple:10%'>B</Box>
</Grid>

<div class="l--grid -gtc -gtc_sm" style="--gtc:1fr 1fr;--gtc_sm:1fr 2fr">
  <div class="l--box -p:30 -bgc:mix" style="--_bgc1:var(--blue);--_mixpct-bgc:20%">A</div>
  <div class="l--box -p:30 -bgc:mix" style="--_bgc1:var(--purple);--_mixpct-bgc:10%">B</div>
</div>

↓

真ん中にメインコンテンツ

Center

<Grid gtc='auto 1fr auto' g='20'>
  <Center p='30' bgc='base-2'>L</Center>
  <Center p='30' bd>Center</Center>
  <Center p='30' bgc='base-2'>R</Center>
</Grid>

<div class="l--grid -g:20 -gtc" style="--gtc:auto 1fr auto">
  <div class="l--center -p:30 -bgc:base-2">L</div>
  <div class="l--center -p:30 -bd">Center</div>
  <div class="l--center -p:30 -bgc:base-2">R</div>
</div>

↓

ブレイクポイントでエリアを切り替える

Left

Center

Right

リサイズ可能

<Grid
  g='20'
  gtc={['1fr 1fr', '8em 1fr 8em']}
  gta={[
    `'main main' 'left right'`,
    `'left main right'`
  ]}
>
  <Box ga='left' p='20' bgc='base-2'>Left</Box>
  <Box ga='main' p='20' bd>Center</Box>
  <Box ga='right' p='20' bgc='base-2'>Right</Box>
</Grid>

<div
  class="l--grid -gta -gta_sm -gtc -gtc_sm -g:20"
  style="--gta:'main main' 'left right';--gta_sm:'left main right';--gtc:1fr 1fr;--gtc_sm:8em 1fr 8em"
>
  <div class="l--box -p:20 -p:30 -bgc:base-2 -ga" style="--ga:left">Left</div>
  <div class="l--box -p:20 -p:30 -bd -ga" style="--ga:main">Center</div>
  <div class="l--box -p:20 -bgc:base-2 -ga" style="--ga:right">Right</div>
</div>

子要素を重ねて表示する

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

↓

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

SAMPLE TEXT

<Grid ar='16/9' ji='c' ai='c'>
  <Frame ga='1/1' w='100%' h='100%'>
    <Media src='/img/img-1.jpg' op='mid'/>
  </Frame>
  <Decorator ga='1/1' blur='80px' bgc='white' w='50%' h='4em'/>
  <Box ga='1/1' fz='2xl' z='1'>SAMPLE TEXT</Box>
</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="l--box -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'>
  <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='5'>NEWS</Lism>
    </Grid>
    <Dummy lang='ja' tag='a' href='####' hov='op' c='inherit' td='n' className='u--trimHL' lh='s' />
  </Grid>
  <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='5'>TIPS</Lism>
    </Grid>
    <Dummy lang='ja' offset='1' tag='a' href='####' hov='op' c='inherit' td='n' length='s' className='u--trimHL' lh='s' />
  </Grid>
  <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='5'>COLUMN</Lism>
    </Grid>
    <Dummy lang='ja' offset='2' tag='a' href='####' hov='op' c='inherit' td='n' className='u--trimHL' lh='s' />
  </Grid>
</Grid>

Variants

`variant='repeat'`

↓

例

item1

item2

item3

item4

item5

item6

リサイズ可能

<Grid variant='repeat' cols='3' rows='3' g='5'>
  <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>
</Grid>

↓

1:2, 2:1 で順番にコンテンツを表示

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

リサイズ可能

<Grid variant='repeat' cols='3' g='20'>
  <Box><img src='/img/img-1.jpg' alt='' /></Box>
  <Box p='20' bgc='base-2' gc='span 2'><Dummy /></Box>
  <Box p='20' bgc='base-2' gc='span 2'><Dummy length='l'/></Box>
  <Box><img src='/img/img-2.jpg' alt='' /></Box>
</Grid>

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

↓

例

リサイズ可能

<Grid variant='repeat' cols={['4','6','8']} rows='4'>
  <Box gc='1 / -1' p='20' bgc='purple:20%'>A</Box>
  <Box gr='2 / 4' p='20' bgc='blue:20%'>B</Box>
  <Box gc='2 / -2' gr='2 / 4' p='20' bgc='green:20%'>C</Box>
  <Box gr='2 / 4' p='20' bgc='blue:20%'>D</Box>
  <Box gc='1 / -1' gre='-1' p='20' bgc='purple:20%'>E</Box>
</Grid>

gc, gr もブレイクポイントに対応しています。

↓

例

リサイズ可能

<Grid variant='repeat' cols='3' rows='3'>
  <Box gc={['1 / -1','1 / 3']} gr={['1 / -2','1 / -1']} p='30' bgc='base-2'>
    <Box ar='16/9'>A</Box>
  </Box>
  <Box gc={['1', '3 / -1']} gr={['3','1']} p='30' bgc='green:20%'>B</Box>
  <Box gc={['2', '3 / -1']} gr={['3','2']} p='30' bgc='blue:20%'>C</Box>
  <Box gc={['3', '3 / -1']} gr={['3','3']} p='30' bgc='red:20%'>D</Box>
</Grid>