Lism Tips

l--grid（Grid で並べる）

l--grid は、中の要素を Grid（縦と横のマス目）で並べるクラスです。列や行の形は -gtc・-gtr・-gta で決めます。

l--grid は、中の要素を Grid（グリッド。縦と横のマス目）で並べるためのクラスです。列の幅や、どの要素をどのマスに置くかを自由に決められます。

どんなときに使う？#

  • 「左右は中身に合わせた幅、真ん中は残り全部」のように、列ごとに幅を変えたいとき
  • 幅によって、要素の置き場所を入れかえたいとき
  • 要素どうしを同じマスに重ねたいとき

同じ幅の列に分けるだけなら l--columns、列の数を自動で決めたいなら l--autoColumns のほうが短く書けます。

使い方#

l--grid を付けた箱の中に要素を入れ、列の形を -gtc で指定します。-gtc は grid-template-columns（列の並び方）の略です。値は style="--gtc: …" で渡します。

表示例

左
まんなか
右
html
<div class="l--grid -gtc -g:15" style="--gtc: auto 1fr auto">
  <div class="l--center -p:20 -bgc:base-2">左</div>
  <div class="l--center -p:20 -bd">まんなか</div>
  <div class="l--center -p:20 -bgc:base-2">右</div>
</div>

auto は「中身に合わせた幅」、1fr は「残った幅を分けたぶん」という意味です。この例では、左右が文字の幅だけになり、まんなかが残りを全部使います。

一緒に使うクラス#

l--grid 自身が決めるのは「Grid で並べる」ことだけです。列や行の形は、次のクラスで足します。

クラス 元の CSS 決めること
-gtc grid-template-columns 列の数と幅
-gtr grid-template-rows 行の数と高さ
-gta grid-template-areas マスに名前を付けた配置図
-ga grid-area 子要素をどの名前のマスに置くか
-gc grid-column 子要素が横に何マス使うか
-gr grid-row 子要素が縦に何マス使うか
-g gap マスとマスのすきま

-gtc:subgrid・-gtr:subgrid・-ga:1/1・-gc:1/-1・-gr:1/-1 のように、よく使う値はクラス名だけで書けます。そのほかの値は style で変数に入れます。くわしくは 並べ方（Flex・Grid・配置） にあります。

幅で配置を入れかえる#

-gta と -gtc に _sm を付けると、幅が広いときだけ別の値に切り替えられます。下の例は、せまいときは「まんなか」が上の段いっぱいに広がり、広いときは3列に並びます。

表示例

左
まんなか
右
html
<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: 6em 1fr 6em">
  <div class="l--box -p:15 -bgc:base-2 -ga" style="--ga: left">左</div>
  <div class="l--box -p:15 -bd -ga" style="--ga: main">まんなか</div>
  <div class="l--box -p:15 -bgc:base-2 -ga" style="--ga: right">右</div>
</div>

-gta には、マスの名前を行ごとに '…' で囲んで並べます。子要素には -ga で、自分が入るマスの名前を渡します。切り替えのしくみは 画面の幅で切り替える（レスポンシブ） で説明しています。

補足

_sm・_md などは、画面の幅ではなく、先祖（外側）にある is--container（コンテナ）の幅で切り替わります。先祖に is--container が無いと切り替わりません。くわしくは is--container（幅の基準になる箱） と 画面の幅で切り替える（レスポンシブ） にあります。

要素を重ねる#

2つの子要素に同じ -ga:1/1（1行目・1列目のマス）を付けると、同じ場所に重なります。position: absolute を使わずに重ねられるのが利点です。上に出したいほうには -z:1 を付けます。

表示例

重ねた文字
html
<div class="l--grid -ar:16/9">
  <div class="l--frame -ga:1/1 -w:100% -h:100%">
    <img src="/img/sample-landscape.svg" alt="">
  </div>
  <div class="l--center -ga:1/1 -fz:2xl -z:1">重ねた文字</div>
</div>

subgrid で列をそろえる#

subgrid（サブグリッド）は、子の Grid が親の Grid の列の線をそのまま使うしくみです。ニュースの一覧のように、行ごとに分かれた箱の中でも、日付や題の位置を縦にそろえられます。

子の箱に -gtc:subgrid と -gc:1/-1（最初の列から最後の列まで使う）を付けます。

表示例

2024.05.31
短い題
2024.05.29
少し長めの題が入っても、左の日付の列はそろいます
html
<div class="l--grid -gtc -bd-b" style="--gtc: auto 1fr">
  <div class="l--grid -gtc:subgrid -gc:1/-1 -g:20 -ai:center -bd-t -py:20 -px:10">
    <div class="-fz:s">2024.05.31</div>
    <div>短い題</div>
  </div>
  <div class="l--grid -gtc:subgrid -gc:1/-1 -g:20 -ai:center -bd-t -py:20 -px:10">
    <div class="-fz:s">2024.05.29</div>
    <div>少し長めの題が入っても、左の日付の列はそろいます</div>
  </div>
</div>

l--grid のしくみ#

l--grid が付ける CSS は次のとおりです。子要素に min-width: 0 を付けて、長い中身でマスが押し広げられないようにしています。

scss
.l--grid {
  display: grid;

  > * {
    min-width: 0;
  }
}

React・Astro で書く場合#

コンポーネントでは <Grid> を使います。gtc・gta・ga などはそのまま Props で渡せます。配列にすると、幅ごとの値になります。

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

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

Astro では lism-css/astro から読み込みます。書き方は Lism コンポーネント（React・Astro） にまとめています。

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧