Lism Tips

l--tileGrid（タイル状に並べる）

l--tileGrid は、列の数と行の数を決めて、同じ大きさのマス目（タイル）を作るクラスです。

l--tileGrid は、列の数（--cols）と行の数（--rows）を決めて、同じ大きさのマス目を作るクラスです。タイルを敷きつめるように、写真や箱を並べられます。

どんなときに使う？#

  • 写真のギャラリーのように、大きさのそろったマス目に並べたいとき
  • 一部の要素だけ2マスぶん・縦いっぱいに広げて、変化のある並びにしたいとき

列の数だけ決めて、行は中身の数で自然に増やしたいなら l--columns のほうが向いています。

使い方#

箱に l--tileGrid を付け、--cols と --rows を入れます。マスの高さをそろえるため、箱に高さ（下の例では -min-h で最小の高さ）を持たせます。

子要素に -gc（grid-column。横に何マス使うか）・-gr（grid-row。縦に何マス使うか）を付けると、マスをまたいで広げられます。-gr:1/-1 は「1行目から最後の行まで」という意味です。

表示例

1
2
3
4
5
6
html
<div class="l--tileGrid -g:5 -min-h" style="--cols: 3; --rows: 3; --min-h: 300px">
  <div class="l--box -bgc:base-2 -p:10">1</div>
  <div class="l--box -bgc:base-2 -p:10">2</div>
  <div class="l--box -bgc:base-2 -p:10">3</div>
  <div class="l--box -bgc:base-2 -p:10">4</div>
  <div class="l--box -bgc:base-2 -p:10 -gc" style="--gc: span 2">5</div>
  <div class="l--center -p:10 -bgc -gc -gr:1/-1" style="--bgc: var(--blue); --gc: 3">6</div>
</div>

6つめは3列目に置かれ、上から下まで縦いっぱいに広がっています。

専用の変数#

変数 決めること 初期値
--cols 列の数 1
--rows 行の数 1

どちらも幅ごとに変えられます（-cols_sm と --cols_sm、-rows_sm と --rows_sm など）。

幅で列の数を変える#

下の例は、せまい画面では2列、広いとき（_sm）では3列になります。

補足

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

表示例

A
B
C
D
html
<div class="l--tileGrid -cols_sm -g:5 -min-h" style="--cols: 2; --cols_sm: 3; --rows: 2; --min-h: 200px">
  <div class="l--box -bgc:base-2 -p:10">A</div>
  <div class="l--box -bgc:base-2 -p:10">B</div>
  <div class="l--box -bgc:base-2 -p:10">C</div>
  <div class="l--box -bgc:base-2 -p:10">D</div>
</div>

l--tileGrid のしくみ#

l--tileGrid が付ける CSS は次のとおりです。grid-template は「行 / 列」を1行で書ける CSS で、行も列も minmax(0, 1fr) で同じ大きさに分けています。

scss
.l--tileGrid {
  display: grid;
  grid-template: repeat(var(--rows, 1), minmax(0, 1fr)) / repeat(var(--cols, 1), minmax(0, 1fr));
}

React・Astro で書く場合#

コンポーネントでは <TileGrid> を使い、cols・rows を渡します。配列にすると幅ごとの値になります。

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

<TileGrid cols={['2', '3']} rows="4" min-h="50svh" gaf="row dense">
  <Box gc={['1 / -1', 'span 2']} gr={['span 2', '1 / -1']}>A</Box>
  <Box>B</Box>
  <Box>C</Box>
</TileGrid>

gaf は grid-auto-flow（空いたマスの埋め方）の略です。Astro では lism-css/astro から読み込みます。書き方は Lism コンポーネント（React・Astro） にまとめています。

関連するページ#

公式ドキュメント

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

ページの一覧