Grid (l--grid)

l--grid は、コンテンツを Grid レイアウトで配置するためのクラスです。

CSS

.l--grid {
  display: grid;

  > * {
    min-width: 0;
  }
}

Lismコンポーネント

Import

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

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 -gtc -g:15" 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 -bgc:base-2 -ga" style="--ga: left">Left</div>
  <div class="l--box -p:15 -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="relative">
    <Media src="https://cdn.lism-css.com/img/a-1.jpg" alt="" inferSize />
    <Layer style={{ backdropFilter: '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:relative">
    <img 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="inline-flex" jc="center" fz="xs" lh="s" bgc="text" c="base" py="5" px="10" bdrs="10">
        NEWS
      </Lism>
    </Grid>
    <Text util="trim" as="a" href="####" hov="o" c="inherit" td="none" lh="s">
      ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。
    </Text>
  </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="inline-flex" jc="center" fz="xs" lh="s" bgc="text" c="base" py="5" px="10" bdrs="10">
        TIPS
      </Lism>
    </Grid>
    <Text util="trim" as="a" href="####" hov="o" c="inherit" td="none" lh="s">
      それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。
    </Text>
  </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="inline-flex" jc="center" fz="xs" lh="s" bgc="text" c="base" py="5" px="10" bdrs="10">
        COLUMN
      </Lism>
    </Grid>
    <Text util="trim" as="a" href="####" hov="o" c="inherit" td="none" lh="s">
      作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。
    </Text>
  </Grid>
</Grid>