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

比率を固定して要素を並べる

↓

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

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 gtc={['1fr 1fr', '1fr 2fr']} ai='center' g='30'>
  <Box>
    <Frame ar='16/9'><img src='https://cdn.lism-css.com/img/a-1.jpg' alt='' /></Frame>
  </Box>
  <Box>
    <Dummy />
  </Box>
  <Box>
    <Frame ar='16/9'><img src='https://cdn.lism-css.com/img/a-2.jpg' alt='' /></Frame>
  </Box>
  <Box>
    <Dummy length='l'/>
  </Box>
</Grid>

<div class='l--grid -gtc -gtc_sm -ai:center -g:30' style='--gtc:1fr 1fr;--gtc_sm:1fr 2fr'>
  <div class='l--box'>
    <div class='l--frame -ar:16/9'><img src='https://cdn.lism-css.com/img/a-1.jpg' alt='' /></div>
  </div>
  <div class='l--box'>
    <p>Lorem ipsum dolor sit, amet...</p>
  </div>
  <div class='l--box'>
    <div class='l--frame -ar:16/9'><img src='https://cdn.lism-css.com/img/a-2.jpg' alt='' /></div>
  </div>
  <div class='l--box'>
    <p>Lorem ipsum dolor sit, amet...</p>
  </div>
</div>

↓

u-itemDividerを使ってテーブルのような表現にする

Lorem ipsum

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

Dolor sit amet

リサイズ可能

<Grid gtc={['2fr 3fr', '1fr 2fr']} className='u-itemDivider' bd bdc='line'>
  <Box p='20' bgc='base-2'>A</Box>
  <Box p='20' bgc='base-2'>B</Box>
  <Box p='20'>Lorem ipsum</Box>
  <Box p='20'><Dummy /></Box>
  <Box p='20'>Dolor sit amet</Box>
  <Box p='20'><Dummy length='l'/></Box>
</Grid>

<div class='l--grid u-itemDivider -gtc -gtc_sm -bd -bdc:line' style='--gtc:2fr 3fr;--gtc_sm:1fr 2fr'>
  <div class='l--box -p:20 -bgc:base-2'>A</div>
  <div class='l--box -p:20 -bgc:base-2'>B</div>
  <div class='l--box -p:20'>Lorem ipsum</div>
  <div class='l--box -p:20'>
    <p>Lorem ipsum dolor sit, amet...</p>
  </div>
  <div class='l--box -p:20'>Dolor sit amet</div>
  <div class='l--box -p:20'>
    <p>Lorem ipsum dolor sit, amet...</p>
  </div>
</div>

子要素を重ねて表示する

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

↓

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

SAMPLE TEXT

<Grid ar='16/9' ji='center' ai='center'>
  <Frame ga='1/1' w='100%' h='100%'>
    <Media src='https://cdn.lism-css.com/img/a-1.jpg' o='-20'/>
  </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:center -ai:center">
  <div class="l--frame -w:100% -h:100% -ga:1">
    <img class="a--media -o:soft" src="https://cdn.lism-css.com/img/a-1.jpg">
  </div>
  <div class="a--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='center' bd-t py='30'>
    <Grid gtc={['auto auto', '1fr 1fr']} g='20' jc='start' ai='center'>
      <Lism fz='xs'>2024.05.31</Lism>
      <Lism d='in-flex' jc='center' bd fz='xs' lh='1' bgc='text' c='base' p='10' bdrs='5'>NEWS</Lism>
    </Grid>
    <Dummy lang='ja' tag='a' href='####' hov='o' c='inherit' td='none' className='u-trim' lh='s' />
  </Grid>
  <Grid gtc='subgrid' gc='1/-1' g='20' ai='center' bd-t py='30'>
    <Grid gtc={['auto auto', '1fr 1fr']} g='20' jc='start' ai='center'>
      <Lism fz='xs'>2024.05.29</Lism>
      <Lism d='in-flex' jc='center' 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='o' c='inherit' td='none' length='s' className='u-trim' lh='s' />
  </Grid>
  <Grid gtc='subgrid' gc='1/-1' g='20' ai='center' bd-t py='30'>
    <Grid gtc={['auto auto', '1fr 1fr']} g='20' jc='start' ai='center'>
      <Lism fz='xs'>2024.05.18</Lism>
      <Lism d='in-flex' jc='center' 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='o' c='inherit' td='none' className='u-trim' lh='s' />
  </Grid>
</Grid>

`-gtc:liquid`

l--grid との併用が前提の、gtcユーティリティクラスです。

列数を指定せず、子要素が指定した幅より小さくならないように自動で折り返しされるカラムレイアウトを作成します。

ペアプロパティ

colsで子要素が維持する最小幅を指定できます（デフォルトは--sz--minです）。

↓

デフォルト幅

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

Amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

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.

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

リサイズ可能

<Grid gtc='liquid' g='20'>
  <Box bxsh='20' p='20'><Dummy/></Box>
  <Box bxsh='20' p='20'><Dummy/></Box>
  <Box bxsh='20' p='20'><Dummy offset='1' /></Box>
  <Box bxsh='20' p='20'><Dummy offset='2' /></Box>
  <Box bxsh='20' p='20'><Dummy length='s' /></Box>
  <Box bxsh='20' p='20'><Dummy /></Box>
</Grid>

↓

cols=12rem

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

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

Amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

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.

リサイズ可能

<Grid gtc='liquid' g='20' cols='12rem'>
  <Box bxsh='20' p='20'><Dummy length='s' /></Box>
  <Box bxsh='20' p='20'><Dummy length='s' /></Box>
  <Box bxsh='20' p='20'><Dummy /></Box>
  <Box bxsh='20' p='20'><Dummy offset='1' /></Box>
  <Box bxsh='20' p='20'><Dummy offset='2' /></Box>
  <Box bxsh='20' p='20'><Dummy length='s' /></Box>
</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='30' bgc='base-2'>A</Box>
  <Box p='30' bgc='green:20%'>B</Box>
  <Box p='30' bgc='blue:20%'>C</Box>
  <Box p='30' bgc='red:20%'>D</Box>
  <Box p='30' bgc='purple:20%'>E</Box>
</Grid>