@lism-css/mcp 0.23.0 → 0.26.0

package/dist/data/guides/primitives/l--columns.md

@@ -2,69 +2,20 @@
 
 ブレイクポイントごとに指定した列数で表示できるカラムクラス。等幅の複数カラムを定義したい場合に使います。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--columns.md
 
-- クラス名: `l--columns`
-- コンポーネント: `<Columns>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_columns.scss
-- 公式ドキュメント: https://lism-css.com/docs/primitives/l--columns.md
+## 既定の挙動
+
+- `display:grid`。
+- `--cols:2`を初期値にし、`grid-template-columns:repeat(var(--cols), minmax(0, 1fr))`で等幅列を作ります。
+- 等幅N列は`Grid gtc="repeat(...)"`ではなく`Columns cols={...}`を優先します。
 
 ## 専用Props
 
 | Prop | CSS変数 | 説明 | デフォルト |
-|------|--------|------|------------|
+| --- | --- | --- | --- |
 | `cols` | `--cols` | 列数を指定。配列でブレイクポイント指定可 | `2` |
 
-## Usage
-
-### 2列レイアウト
-
-```jsx
-<Columns cols={2} g="20">
-  <Box bgc="base-2" p="20">Box</Box>
-  <Box bgc="base-2" p="20">Box</Box>
-  <Box bgc="base-2" p="20">Box</Box>
-  <Box bgc="base-2" p="20">Box</Box>
-</Columns>
-```
-
-```html
-<div class="l--columns -g:20" style="--cols: 2">
-  <div class="l--box -bgc:base-2 -p:20">Box</div>
-  <div class="l--box -bgc:base-2 -p:20">Box</div>
-  <div class="l--box -bgc:base-2 -p:20">Box</div>
-  <div class="l--box -bgc:base-2 -p:20">Box</div>
-</div>
-```
-
-### ブレイクポイント別指定
-
-```jsx
-<Columns cols={[1, 2, 3]} g="20">
-  <Box>Box1</Box>
-  <Box>Box2</Box>
-  <Box>Box3</Box>
-</Columns>
-```
-
-```html
-<div class="l--columns -cols_sm -cols_md -g:20" style="--cols: 1; --cols_sm: 2; --cols_md: 3">
-  <div class="l--box">Box1</div>
-  <div class="l--box">Box2</div>
-  <div class="l--box">Box3</div>
-</div>
-```
-
-`null` でブレイクポイントをスキップ可：`cols={[2, null, 4]}` で「デフォルト2列、`md` から4列」になります。
-
-### `gc`（grid-column）で子要素の横幅を個別制御
-
-子要素側で `gc="span 2"` のように指定すると、その子だけ複数列にまたがって配置できます。`cols="6"` 等の多めの列数と組み合わせると、不揃いなブロックレイアウトを作れます。
-
-### subgrid でカード高さ揃え
-
-子要素を `<Grid gtr="subgrid" gr="span 4">` にすると、親 Columns の行グリッドを継承しカード内のメディア・タイトル・本文・フッタを縦方向に揃えられます。
-
 ## 関連プリミティブ
 
 - [l--tileGrid](./l--tileGrid.md) — 列数×行数を指定する均等タイル

package/dist/data/guides/primitives/l--flex.md

@@ -2,70 +2,13 @@
 
 コンテンツを Flex レイアウトで配置するためのクラス。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--flex.md
 
-- クラス名: `l--flex`
-- コンポーネント: `<Flex>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_flex.scss
-- 公式ドキュメント: https://lism-css.com/docs/primitives/l--flex.md
+## 既定の挙動
 
-## Usage
-
-### 基本的な使い方
-
-```jsx
-<Flex>
-  <div>Item</div>
-  <div>Item</div>
-  <div>Item</div>
-</Flex>
-```
-
-```html
-<div class="l--flex">
-  <div>Item</div>
-  <div>Item</div>
-  <div>Item</div>
-</div>
-```
-
-### Flex プロパティの指定
-
-Property Class や Lism Props で Flex 関連プロパティ（`g`, `fxw`, `jc`, `ai`, `fxd` など）を指定できます。レスポンシブ対応プロパティは配列・オブジェクトで指定可能。
-
-```jsx
-<Flex fxw="wrap" jc="center" g="20">
-  <div>Flex Content</div>
-  <div>Flex Content</div>
-  <div>Flex Content</div>
-</Flex>
-```
-
-```html
-<div class="l--flex -fxw:wrap -g:20 -jc:center">
-  <div>Flex Content</div>
-  <div>Flex Content</div>
-  <div>Flex Content</div>
-</div>
-```
-
-### 子要素の Flex プロパティ
-
-子要素側も `fx`（flex shorthand）, `fxb`（flex-basis）, `fxg`（flex-grow）, `fxsh`（flex-shrink）などで個別制御できます。
-
-```jsx
-<Flex g="20">
-  <Lism fx="1">Flex Content</Lism>
-  <Lism fxb={['50%', null, '25%']}>Flex Content</Lism>
-</Flex>
-```
-
-```html
-<div class="l--flex -g:20">
-  <div class="-fx:1">Flex Content</div>
-  <div class="-fxb -fxb_md" style="--fxb:50%;--fxb_md:25%">Flex Content</div>
-</div>
-```
+- `display:flex`。
+- 直下の子要素に`min-width:0`を付与し、flex itemのはみ出しを抑えます。
+- `gap`、`flex-wrap`、`align-items`、`justify-content`、`flex-direction`は既定では指定しません。必要な時だけ`g`/`fxw`/`ai`/`jc`/`fxd`で指定します。
 
 ## 関連プリミティブ
 

package/dist/data/guides/primitives/l--flow.md

@@ -2,93 +2,32 @@
 
 子要素間の余白を `margin-block-start` で管理するフローレイアウト。**記事コンテンツなどテキスト主体のフローレイアウト**に最適。
 
-## 基本情報
-
-- クラス名: `l--flow`
-- コンポーネント: `<Flow>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_flow.scss
-- 公式ドキュメント: https://lism-css.com/docs/primitives/l--flow.md
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--flow.md
 
 ## 余白の仕組み
 
 `l--flow` 直下の子要素は、`--flow` 変数と `margin-block-start` で間隔が管理されます。見出しタグ（`h1`〜`h6`）のみ余白が大きくなり、`calc(var(--flow) * 2 + 0.5em)` で計算されます。
 
 | クラス | 余白量 |
-|--------|-------|
+| --- | --- |
 | `l--flow` | `--flow--base`（`--s30`、`lang="ja"` 時は `--s35`） |
 | `.l--flow.-flow:s` | `--flow--s`（`--s20`） |
 | `.l--flow.-flow:` | `--flow` を直接指定した値 |
 
 `--flow--base` / `--flow--s` は `:root` で定義されたトークン（[tokens](../tokens.md#フロー余白-flow) 参照）。日本語環境では文字密度に合わせて `--flow--base` が広めに上書きされる。
 
-## 専用Props
-
-| Prop | 説明 |
-|------|------|
-| `flow` | `--flow` の値を指定。`s` / `l` などのトークン値を渡すと `-flow:{value}` クラスが付与、任意値を渡すと `-flow:` + `style="--flow:..."` が出力される |
-
-## Usage
-
-### 基本的な使い方
-
-```jsx
-<Flow>
-  <p>本文1...</p>
-  <p>本文2...</p>
-  <h2>Heading 2</h2>
-  <p>本文3...</p>
-  <ul>
-    <li>リスト項目1</li>
-    <li>リスト項目2</li>
-  </ul>
-</Flow>
-```
-
-```html
-<div class="l--flow">
-  <p>本文1...</p>
-  <p>本文2...</p>
-  <h2>Heading 2</h2>
-  <p>本文3...</p>
-  <ul>...</ul>
-</div>
-```
-
-### 余白量をトークンで変える（`flow="s"`）
+## 既定の挙動
 
-```jsx
-<Flow flow="s">
-  <p>本文...</p>
-  <h2>Heading</h2>
-  <p>本文...</p>
-</Flow>
-```
-
-```html
-<div class="l--flow -flow:s">
-  <p>本文...</p>
-  <h2>Heading</h2>
-  <p>本文...</p>
-</div>
-```
-
-### 任意の値を指定する
-
-トークン値以外を `flow` に渡すと、`-flow:` クラスと `--flow` CSS変数で出力されます。
+- `display:flow-root`。
+- 直下の`* + *`へ`margin-block-start:var(--flow)`を付与し、`--flow`は`--flow--base`を初期値にします。
+- 直下の見出しは上余白を広めにし、先頭要素と`is--skipFlow + *`は余白を打ち消します。
+- 直下の`img`/`video`/`iframe`は`display:block`へ初期化します。
 
-```jsx
-<Flow flow="10px">
-  <p>本文...</p>
-  <p>本文...</p>
-</Flow>
-```
+## 専用Props
 
-```html
-<div class="l--flow -flow:" style="--flow:10px">
-  <p>本文...</p>
-  <p>本文...</p>
-</div>
-```
+| Prop | 説明 |
+| --- | --- |
+| `flow` | `--flow` の値を指定。トークン値 `s` を渡すと `-flow:s` クラスが付与、任意値を渡すと `-flow:` + `style="--flow:..."` が出力される |
 
 ## `is--skipFlow`
 

package/dist/data/guides/primitives/l--frame.md

@@ -2,91 +2,20 @@
 
 直下のメディア要素（`img`, `video`, `iframe`）を自身のサイズにフィットさせて表示するクラス。アスペクト比固定のメディア枠を簡単に作れます。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--frame.md
 
-- クラス名: `l--frame`
-- コンポーネント: `<Frame>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_frame.scss
-- 公式ドキュメント: https://lism-css.com/docs/primitives/l--frame.md
+## 既定の挙動
+
+- `overflow:hidden`を既定で持ちます。通常`ov="hidden"`は足しません。
+- 直下の`img`/`video`/`iframe`を`display:block;width:100%;height:100%;object-fit:cover`でフレームにフィットさせます。
+- 直下メディアへ`w`/`h`/`object-fit:cover`を重ねないでください。`object-fit:contain`や`object-position`など既定と違う意図がある場合だけ追加します。
 
 ## 専用Props
 
 | Prop | 説明 |
-|------|------|
+| --- | --- |
 | `ar` | フレームのアスペクト比を指定（`16/9` など）。`ar` 自体はどのコンポーネントにも指定できる汎用 CSS Prop |
 
-## Usage
-
-### アスペクト比の指定
-
-```jsx
-<Frame ar="16/9">
-  <img src="/img/a-1.jpg" alt="" width="960" height="640" />
-</Frame>
-```
-
-```html
-<div class="l--frame -ar:16/9">
-  <img src="/img/a-1.jpg" alt="" width="960" height="640" />
-</div>
-```
-
-### `figure` / `figcaption` の使用
-
-`as="figure"` を指定してセマンティックな `<figure>` 要素として出力できます。
-
-```jsx
-<Frame as="figure" ar="16/9" pos="relative">
-  <img src="/img/a-1.jpg" alt="" width="960" height="640" />
-  <Flex as="figcaption" pos="absolute" b="0" w="100%" jc="center" p="10" c="white" bgc="rgb(0 0 0 / 40%)">
-    Caption text
-  </Flex>
-</Frame>
-```
-
-### `iframe` / `video` の使用
-
-`iframe`（YouTube 埋め込みなど）や `video` も同様に `l--frame` 直下に配置すれば自動的にフィットします。
-
-```jsx
-<Frame ar="16/9">
-  <iframe src="https://www.youtube.com/embed/xxx" allowfullscreen />
-</Frame>
-```
-
-### Layer 系を活用したオーバーレイ
-
-`<Layer>` と組み合わせると、メディア上にテキストやオーバーレイを重ねられます。
-
-```jsx
-<Frame ar="3/2" pos="relative" c="#fff">
-  <img src="/img/a-1.jpg" alt="" width="960" height="640" />
-  <Layer bgc="rgb(0 0 0 / 40%)" />
-  <Layer p="30">
-    <Center min-h="100%" g="15">
-      <h2>Heading</h2>
-      <Text>オーバーレイ内のテキスト...</Text>
-    </Center>
-  </Layer>
-</Frame>
-```
-
-### レスポンシブな `ar`
-
-`ar` はブレイクポイント別に配列で指定できます。
-
-```jsx
-<Frame ar={['1/1', '3/2', '16/9']} pos="relative">
-  <img src="/img/a-1.jpg" alt="" width="960" height="640" />
-</Frame>
-```
-
-```html
-<div class="l--frame -ar:1/1 -ar_sm -ar_md" style="--ar_sm: 3/2; --ar_md: 16/9">
-  <img src="/img/a-1.jpg" alt="" />
-</div>
-```
-
 ## 関連プリミティブ
 
 - [is--layer](../trait-class/is--layer.md) — `l--frame` 内のオーバーレイ配置に使用

package/dist/data/guides/primitives/l--grid.md

@@ -2,64 +2,13 @@
 
 コンテンツを CSS Grid レイアウトで配置するクラス。`gtc` / `gta` / `ga` などの Grid プロパティと組み合わせて使います。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--grid.md
 
-- クラス名: `l--grid`
-- コンポーネント: `<Grid>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_grid.scss
-- 公式ドキュメント: https://lism-css.com/docs/primitives/l--grid.md
+## 既定の挙動
 
-## Usage
-
-### 基本的な使い方
-
-`gtc`（`grid-template-columns`）で列を定義します。
-
-```jsx
-<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>
-```
-
-```html
-<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>
-```
-
-### ブレイクポイントでエリアを切り替える
-
-`gta`（`grid-template-areas`）と `gtc` を配列で渡すと、ブレイクポイントごとに別レイアウトを定義できます。子要素には `ga`（`grid-area`）で対応するエリア名を指定します。
-
-```jsx
-<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>
-```
-
-### 子要素を重ねて表示する（`ga="1/1"`）
-
-`position: absolute` を使わず、`grid-area: 1/1` を複数子要素に指定することで要素を重ねられます。
-
-```jsx
-<Grid ar="16/9">
-  <Frame ga="1/1" w="100%" h="100%" pos="relative">
-    <Media src="/img/a-1.jpg" alt="" inferSize />
-    <Layer bgc="rgb(0 0 0 / 40%)" />
-  </Frame>
-  <Center ga="1/1" fz="3xl" z="1" c="white">SAMPLE TEXT</Center>
-</Grid>
-```
-
-### subgrid の活用
-
-`gtc="subgrid"` を入れ子の Grid に指定することで親 Grid のトラックを継承し、複数行を揃えたレイアウトが作れます。記事一覧やテーブル風レイアウトに活用できます。
+- `display:grid`。
+- 直下の子要素に`min-width:0`を付与し、grid itemのはみ出しを抑えます。
+- `grid-template-columns`や`gap`は既定で持たないため、必要な時だけ`gtc`/`g`などで指定します。
 
 ## 関連プリミティブ
 

package/dist/data/guides/primitives/l--stack.md

@@ -2,52 +2,13 @@
 
 複数の要素を Flex レイアウトで縦並びに配置するクラス。`gap` で余白を管理します。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--stack.md
 
-- クラス名: `l--stack`
-- コンポーネント: `<Stack>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_stack.scss
-- 公式ドキュメント: https://lism-css.com/docs/primitives/l--stack.md
+## 既定の挙動
 
-## Usage
-
-### 基本的な使い方
-
-```jsx
-<Stack g="20">
-  <p>コンテンツ</p>
-  <p>コンテンツ</p>
-  <p>コンテンツ</p>
-</Stack>
-```
-
-```html
-<div class="l--stack -g:20">
-  <p>コンテンツ</p>
-  <p>コンテンツ</p>
-  <p>コンテンツ</p>
-</div>
-```
-
-### 内在的な中央寄せ（`ai="center"`）
-
-`ai="center"` を併用すると、Every Layout で言うところの**内在的な中央寄せ**（コンテンツ幅が短い要素だけ中央揃え、長い要素はそのまま）になります。
-
-```jsx
-<Stack ai="center" g="20" p="30">
-  <h3>見出し</h3>
-  <p>短いテキスト</p>
-  <p>長めのテキスト...</p>
-</Stack>
-```
-
-```html
-<div class="l--stack -ai:center -p:30 -g:20">
-  <h3>見出し</h3>
-  <p>短いテキスト</p>
-  <p>長めのテキスト...</p>
-</div>
-```
+- `display:flex`。
+- `flex-direction:column`で縦並びにします。
+- `gap`は既定で持たないため、間隔は`g`/`-g:*`で指定します。通常`fxd="column"`は足しません。
 
 ## 関連プリミティブ
 

package/dist/data/guides/primitives/l--switchColumns.md

@@ -2,66 +2,21 @@
 
 複数列 ↔ 1列の切り替えをコンテナクエリやメディアクエリを使わずに実装するクラス。Flexbox ベースで、親コンテナ幅に応じて自動的に折り返します。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--switchColumns.md
 
-- クラス名: `l--switchColumns`
-- コンポーネント: `<SwitchColumns>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_switchColumns.scss
-- 公式ドキュメント: https://lism-css.com/docs/primitives/l--switchColumns.md
+## 既定の挙動
+
+- `display:flex`。
+- `flex-wrap:wrap`で折り返しを有効化済み。
+- `--breakSize:var(--sz--xs)`を初期値にし、直下子要素の`flex-basis`で親幅に応じた縦横切替を行います。
+- 通常`fxw="wrap"`は足しません。
 
 ## 専用Props
 
 | Prop | CSS変数 | デフォルト | 説明 |
-|------|--------|-----------|------|
+| --- | --- | --- | --- |
 | `breakSize` | `--breakSize` | `var(--sz--xs)` | 横並びを維持するのに必要な親コンテナ幅を指定。`sz` トークンが使える |
 
-## Usage
-
-### デフォルト幅で利用する
-
-```jsx
-<SwitchColumns g="20">
-  <div class="-bgc:base-2 -p:20">Box</div>
-  <div class="-bgc:base-2 -p:20">Box</div>
-  <div class="-bgc:base-2 -p:20">Box</div>
-</SwitchColumns>
-```
-
-```html
-<div class="l--switchColumns -g:20">
-  <div class="-bgc:base-2 -p:20">Box</div>
-  <div class="-bgc:base-2 -p:20">Box</div>
-  <div class="-bgc:base-2 -p:20">Box</div>
-</div>
-```
-
-### `breakSize` の指定
-
-```jsx
-<SwitchColumns breakSize="s" g="20">
-  <div class="-bgc:base-2 -p:20">Box</div>
-  <div class="-bgc:base-2 -p:20">Box</div>
-</SwitchColumns>
-```
-
-```html
-<div class="l--switchColumns -g:20" style="--breakSize: var(--sz--s)">
-  <div class="-bgc:base-2 -p:20">Box</div>
-  <div class="-bgc:base-2 -p:20">Box</div>
-</div>
-```
-
-### `flex-grow` で比率を調整
-
-子要素に `flex-grow` を指定すると、横並び時の幅の比率を個別に調整できます。
-
-```jsx
-<SwitchColumns breakSize="s" g="20">
-  <div class="-bgc:base-2 -p:20">Box</div>
-  <div class="-bgc:base-2 -p:20" style={{ flexGrow: 2 }}>Box</div>
-</SwitchColumns>
-```
-
 ## 関連プリミティブ
 
 - [l--autoColumns](./l--autoColumns.md) — 最小幅ベースの自動段組

package/dist/data/guides/primitives/l--tileGrid.md

@@ -2,58 +2,21 @@
 
 `cols`（列数）と `rows`（行数）を指定して、**均等なタイル型グリッドレイアウト**を構成するクラス。内部的には `grid-template: repeat(rows, minmax(0, 1fr)) / repeat(cols, minmax(0, 1fr))` を使用します。
 
-## 基本情報
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/l--tileGrid.md
 
-- クラス名: `l--tileGrid`
-- コンポーネント: `<TileGrid>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_tileGrid.scss
-- 公式ドキュメント: https://lism-css.com/docs/primitives/l--tileGrid.md
+## 既定の挙動
+
+- `display:grid`。
+- `grid-template:repeat(var(--rows, 1), minmax(0, 1fr)) / repeat(var(--cols, 1), minmax(0, 1fr))`で行数・列数を均等に割ります。
+- `rows`/`cols`を省略するとどちらも1です。
 
 ## 専用Props
 
 | Prop | CSS変数 | 説明 | デフォルト |
-|------|--------|------|------------|
+| --- | --- | --- | --- |
 | `cols` | `--cols` | 列数を指定。配列でブレイクポイント指定可 | `1` |
 | `rows` | `--rows` | 行数を指定。配列でブレイクポイント指定可 | `1` |
 
-## Usage
-
-### 基本的な使い方
-
-```jsx
-<TileGrid cols="3" rows="3" g="5" min-h="50svh">
-  <Box p="20" bgc="base-2">item1</Box>
-  <Box p="20" bgc="base-2">item2</Box>
-  <Box p="20" bgc="base-2">item3</Box>
-  <Box p="20" bgc="base-2">item4</Box>
-  <Box p="20" bgc="base-2" gc="span 2">item5</Box>
-  <Center gc="3" gr="1 / -1" p="20" bgc="blue">item6</Center>
-</TileGrid>
-```
-
-```html
-<div class="l--tileGrid -g:5 -min-h:50svh" style="--cols: 3; --rows: 3">
-  <div class="l--box -p:20 -bgc:base-2">item1</div>
-  <div class="l--box -p:20 -bgc:base-2">item2</div>
-  <div class="l--box -p:20 -bgc:base-2">item3</div>
-  <div class="l--box -p:20 -bgc:base-2">item4</div>
-  <div class="l--box -p:20 -bgc:base-2 -gc:span 2">item5</div>
-  <div class="l--center -p:20 -bgc:blue" style="grid-column: 3; grid-row: 1 / -1">item6</div>
-</div>
-```
-
-### ブレイクポイント別指定
-
-`cols` / `rows` をブレイクポイントで切り替え、`gaf`（`grid-auto-flow`）と組み合わせて動的レイアウトも構築できます。
-
-```jsx
-<TileGrid cols={['2', '3']} rows="4" min-h="50svh" gaf="row dense">
-  <Box gc={['1 / -1', 'span 2']} gr={['span 2', '1 / -1']} p="20" bgc="base-2">A</Box>
-  <Box p="20" bgc="green:20%">B</Box>
-  <Box p="20" bgc="blue:20%">C</Box>
-</TileGrid>
-```
-
 ## 関連プリミティブ
 
 - [l--columns](./l--columns.md) — 等幅列のみ（1D）のカラム