Grid (l--grid)

l--grid is a class for arranging content in a Grid layout.

CSS

.l--grid {
  display: grid;

  > * {
    min-width: 0;
  }
}

Lism Component

Import

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

Usage

Basic usage

↓

Main content in the center

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>

Switching grid areas at breakpoints

↓

Switching grid areas at breakpoints

Left

Center

Right

Resize

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

Overlapping child elements

This example stacks elements using grid-area:1/1 (-ga:1) without position:absolute.

↓

Overlapping Grid child elements

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>

Using subgrid

↓

Example: building a latest-articles list

2024.05.31

NEWS

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

2024.05.29

TIPS

Sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

2024.05.18

COLUMN

Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

Resize

<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">
      Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.
    </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">
      Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
    </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">
      Lorem ipsum dolor sit amet.
    </Text>
  </Grid>
</Grid>