コンテンツにスキップ
Lism UI

Grid

コンテンツをGridレイアウトで配置するためのコンポーネントです。
<GridItem>と組み合わせて使うとより便利です。

<Grid>に使用されるクラス.l--gridは、次のようになっており、簡単なレイアウトであれば変数セットだけで調整ができるようにもなっています。

.l--grid {
  --gtc: none;
  --gtr: none;
  --gta: none;
  display: grid;
  grid-template: var(--gtr) / var(--gtc);
  grid-template-areas: var(--gta);
}

コンポーネントでは、gtc、gtr、gtaは基本的には変数のみが出力されます。

Import

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

Props

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

PropCSS
gdgrid
gtgrid-template
gtagrid-template-gta
gtcgrid-template-gtc
gtrgrid-template-rows

Usage

↓
1:2 の比率でコンテンツを表示
A
B
リサイズ可能 
<Grid gtc='1fr 2fr'>
  <div>A</div>
  <div>B</div>
</Grid>
↓
真ん中にメインコンテンツ
L
Center
R
リサイズ可能 
<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>
↓
ブレイクポイントでエリアを切り替える
Left
Center
Right
Left
Center
Right
リサイズ可能 
<Grid
  g='20'
  gtc={['1fr 1fr', '8em 1fr 8em']}
  gta={[
    `'main main' 'left right'`,
    `'left main right'`
  ]}
>
  <GridItem ga='left' p='20' bgc='base-2'>Left</GridItem>
  <GridItem ga='main' p='20' bd>Center</GridItem>
  <GridItem ga='right' p='20' bgc='base-2'>Right</GridItem>
</Grid>

Variants

variant='repeat'

↓
例
A
B
C
リサイズ可能 
<Grid variant='repeat' cols='4' rows='4' minH='15rem'>
  <GridItem gc='1 / 3' gr='1 / 5' p='20' bgc='blue:20%'>A</GridItem>
  <GridItem gc='3 / 6' gr='2 / 5' p='20' bgc='green:20%'>B</GridItem>
  <GridItem gc='4 / 7' gr='1' p='20' bgc='red:20%'>C</GridItem>
</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'>
  <GridItem><img src='/img/img-1.jpg' alt='' /></GridItem>
  <GridItem p='20' bgc='base-2' gc='span 2'><Dummy /></GridItem>
  <GridItem p='20' bgc='base-2' gc='span 2'><Dummy length='l'/></GridItem>
  <GridItem><img src='/img/img-2.jpg' alt='' /></GridItem>
</Grid>

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

↓
例
A
B
C
D
E
リサイズ可能 
<Grid variant='repeat' cols={['4','6','8']} rows='4'>
  <GridItem gc='1 / -1' p='20' bgc='purple:20%'>A</GridItem>
  <GridItem gr='2 / 4' p='20' bgc='blue:20%'>B</GridItem>
  <GridItem gc='2 / -2' gr='2 / 4' p='20' bgc='green:20%'>C</GridItem>
  <GridItem gr='2 / 4' p='20' bgc='blue:20%'>D</GridItem>
  <GridItem gc='1 / -1' gre='-1' p='20' bgc='purple:20%'>E</GridItem>
</Grid>

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

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