Grid

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

Import

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

Props

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

↓

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

Center

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

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

↓

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

Left

Center

Right

リサイズ可能

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

<div
  class="l--grid -gta -gta_sm -gtc -gtc_sm -g:15"
  style="--gta:'main main' 'left right';--gta_sm:'left main right';--gtc:1fr 1fr;--gtc_sm:8em 1fr 8em"
>
  <div class="l--box -p:15 -p:20 -bgc:base-2 -ga" style="--ga:left">Left</div>
  <div class="l--box -p:15 -p:20 -bd -ga" style="--ga:main">Center</div>
  <div class="l--box -p:15 -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'>
  <Frame ga='1/1' w='100%' h='100%' pos='rel'>
    <Media src='https://cdn.lism-css.com/img/a-1.jpg' />
    <Layer blur='10px' bgc='rgb(0 0 0 / 40%)' />
  </Frame>
  <Center ga='1/1' fz='3xl' z='1' c='white'>SAMPLE TEXT</Center>
</Grid>

<div class='l--grid -ar:16/9'>
  <div class='l--frame -ga:1/1 -w:100% -h:100% -pos:rel'>
    <img class='a--media' src='https://cdn.lism-css.com/img/a-1.jpg' />
    <div class='is--layer -bgc' style='backdrop-filter:blur(10px);--bgc:rgb(0 0 0 / 40%)'></div>
  </div><div class='l--center -ga:1/1 -fz:3xl -z:1 -c' style='--c:var(--white)'>SAMPLE TEXT</div>
</div>

subgridの活用

↓

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

2024.05.31

NEWS

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

2024.05.29

TIPS

それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

2024.05.18

COLUMN

作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。

リサイズ可能

<Grid gtc={['auto','auto 1fr']} bd-b>
  <Grid gtc='subgrid' gc='1/-1' g='20' ai='center' bd-t py='20' px='10'>
    <Grid gtc={['auto auto', '1fr 1fr']} g='20' jc='start' ai='center'>
      <Lism fz='s'>2024.05.31</Lism>
      <Lism d='in-flex' jc='center' fz='xs' lh='s' bgc='text' c='base' py='5' px='10' bdrs='5'>NEWS</Lism>
    </Grid>
    <Dummy className='u-trim' lang='ja' length='s' tag='a' href='####' hov='o' c='inherit' td='none' lh='s' />
  </Grid>
  <Grid gtc='subgrid' gc='1/-1' g='20' ai='center' bd-t py='20' px='10'>
    <Grid gtc={['auto auto', '1fr 1fr']} g='20' jc='start' ai='center'>
      <Lism fz='s'>2024.05.29</Lism>
      <Lism d='in-flex' jc='center' fz='xs' lh='s' bgc='text' c='base' py='5' px='10' bdrs='5'>TIPS</Lism>
    </Grid>
    <Dummy className='u-trim' lang='ja' offset='2' tag='a' href='####' hov='o' c='inherit' td='none' lh='s' />
  </Grid>
  <Grid gtc='subgrid' gc='1/-1' g='20' ai='center' bd-t py='20' px='10'>
    <Grid gtc={['auto auto', '1fr 1fr']} g='20' jc='start' ai='center'>
      <Lism fz='s'>2024.05.18</Lism>
      <Lism d='in-flex' jc='center' fz='xs' lh='s' bgc='text' c='base' py='5' px='10' bdrs='5'>COLUMN</Lism>
    </Grid>
    <Dummy className='u-trim' lang='ja' length='l' offset='6' tag='a' href='####' hov='o' c='inherit' td='none' lh='s' />
  </Grid>
</Grid>

`-gt:repeat`

colsで列数、rowsで行数を指定できるgtユーティリティクラスです。

それぞれ、ブレイクポイント指定も可能で初期値は 1 です。

↓

例

item1

item2

item3

item4

item5

item6

リサイズ可能

<Grid gt='repeat' 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>
</Grid>

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

↓

例

リサイズ可能

<Grid gt='repeat' 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>
</Grid>