@lism-css/mcp 0.12.0 → 0.14.0

package/dist/data/guides/primitives/a--icon.md

@@ -0,0 +1,105 @@
+# a--icon / `<Icon>`
+
+アイコン要素を表示するためのクラス。`flex-shrink: 0`、デフォルトサイズ `1em`。
+
+## 基本情報
+
+- クラス名: `a--icon`
+- コンポーネント: `<Icon>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/atomic/_icon.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/a--icon/
+
+## 出力されるHTML構造
+
+`<Icon>` は `label` の有無でアクセシビリティ属性を自動切り替えします。
+
+```html
+<!-- label なし -->
+<svg class="a--icon" aria-hidden="true">...</svg>
+
+<!-- label あり -->
+<svg class="a--icon" aria-label="..." role="img">...</svg>
+```
+
+## 専用Props
+
+| Prop | 説明 |
+|------|------|
+| `icon` | アイコンを指定。文字列（プリセット名）・オブジェクト（`{as, ...exProps}`）のどちらでも可 |
+| `size` | プリセットアイコン使用時の `width` / `height`（通常は `fz` で指定するほうが推奨） |
+| `label` | `aria-label` として出力。指定があれば `role="img"`、なければ `aria-hidden="true"` |
+
+## Usage
+
+`<Icon>` には**4つの使い方**があります。
+
+### 1. 外部パッケージのアイコンを使う（`as` + `exProps`）
+
+`react-icons`, `@phosphor-icons/react`, `lucide-react` などのサードパーティアイコンコンポーネントを `as` で渡すと、Lism が未処理の props は自動的にそのコンポーネントに転送されます。外部コンポーネント専用の props を明示的に分離したい場合は `exProps` を使います。
+
+```jsx
+import { SmileyIcon } from '@phosphor-icons/react';
+import { Icon } from 'lism-css/react';
+
+// 基本形
+<Icon as={SmileyIcon} fz="2rem" />
+
+// exProps で外部 props を明示的に分離
+<Icon as={SmileyIcon} exProps={{ weight: 'fill', size: '3em' }} c="blue" />
+
+// 上と同じ結果（Lism が "weight" を処理しないため最終的に SmileyIcon に渡る）
+<Icon as={SmileyIcon} weight="fill" c="blue" />
+```
+
+### 2. `as` と `exProps` を `icon` prop に一括指定
+
+`icon={{as: Component, ...exProps}}` の形式で、`as` と `exProps` を1つのオブジェクトとしてまとめて渡せます。アイコンを選択制にする親コンポーネントを作るときに便利です。
+
+```jsx
+import { Home } from 'lucide-react';
+
+<Icon icon={{ as: Home, strokeWidth: 1, size: 64 }} />
+
+// 同じ結果（分割形式）
+<Icon as={Home} exProps={{ strokeWidth: 1, size: 64 }} />
+```
+
+### 3. プリセットアイコンを使う
+
+`lism-css` パッケージ内に [Phosphor Icons](https://phosphoricons.com/) ベースのプリセットアイコンが同梱されています。`icon="アイコン名"` の文字列で呼び出せます。
+
+```jsx
+<Icon icon="menu" />
+<Icon icon="lightbulb" fz="2xl" c="blue" />
+<Icon icon="warning" size="40px" />
+```
+
+プリセット一覧のエクスポート元:
+
+```jsx
+import { phIcons, logoIcons } from 'lism-css/react/atomic/Icon/presets';
+```
+
+### 4. SVG の `path` を直接記述する
+
+`viewBox` を指定すると `<svg>` 要素として出力されるため、子要素に `<path>` 等をそのまま書けます。
+
+```jsx
+<Icon viewBox="0 0 256 256" label="Smiley icon" fz="4xl" c="blue">
+  <path d="M128,24A104,104,0,1,0,232,128..." />
+</Icon>
+```
+
+### 5. `src` で画像をアイコンとして使う
+
+`src` を指定すると `<img>` として出力されます（厳密には4パターンに加えて画像指定も可能）。
+
+```jsx
+<Icon fz="4xl" src="/img/avatar01.jpg" alt="avatar" />
+```
+
+## 関連プリミティブ
+
+- [a--divider](./a--divider.md) — 区切り線
+- [a--spacer](./a--spacer.md) — 空白要素
+- [a--decorator](./a--decorator.md) — 装飾用要素

package/dist/data/guides/primitives/a--spacer.md

@@ -0,0 +1,63 @@
+# a--spacer / `<Spacer>`
+
+要素間のスペースを確保するクラス。`<Spacer>` は `<Lism atomic="spacer" aria-hidden="true" />` のエイリアスとして用意されています。
+
+## 基本情報
+
+- クラス名: `a--spacer`
+- コンポーネント: `<Spacer>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/atomic/_spacer.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/a--spacer/
+
+## 専用Props
+
+`<Spacer>` では **`w` / `h` に対して SPACE トークンの値**が使えます（他のコンポーネントでは SIZE トークンが優先されるため、スペースサイズを直感的に指定できる特殊対応）。
+
+## Usage
+
+### 縦方向のスペース
+
+```jsx
+<p>Content...</p>
+<Spacer h="100px" />
+<p>Content...</p>
+```
+
+```html
+<p>Content...</p>
+<div class="a--spacer -h" style="--h:100px" aria-hidden="true"></div>
+<p>Content...</p>
+```
+
+### SPACE トークンを使う
+
+```jsx
+<p>Content...</p>
+<Spacer h="60" />
+<p>Content...</p>
+```
+
+```html
+<p>Content...</p>
+<div class="a--spacer -h" style="--h:var(--s60)" aria-hidden="true"></div>
+<p>Content...</p>
+```
+
+### 横方向のスペーサー
+
+Flex コンテナ内で `w` を指定すれば横方向のスペーサーとしても使えます。
+
+```jsx
+<Flex g="10">
+  <Box p="20" bd>Box</Box>
+  <Spacer w="40" />
+  <Box p="20" bd>Box</Box>
+  <Box p="20" bd>Box</Box>
+</Flex>
+```
+
+## 関連プリミティブ
+
+- [a--divider](./a--divider.md) — 区切り線
+- [a--decorator](./a--decorator.md) — 装飾用空要素
+- [l--stack](./l--stack.md) — `gap` で余白を管理する縦積み

package/dist/data/guides/primitives/is--boxLink.md

@@ -0,0 +1,97 @@
+# is--boxLink / `<BoxLink>`
+
+ボックス全体をクリック可能なリンク領域にするクラス。
+
+## 基本情報
+
+- クラス名: `is--boxLink`
+- コンポーネント: `<BoxLink>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_boxLink.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--boxLink/
+
+## 専用Props
+
+| Prop | 説明 |
+|------|------|
+| `href` | リンク先を指定。`href` があれば `<BoxLink>` 自体が `<a>` タグに、なければ `<div>` として出力される（**特殊挙動**） |
+
+通常の `<Lism>` エイリアスコンポーネントと異なり、`<BoxLink>` だけは `href` 指定の有無で出力タグが動的に切り替わります。
+
+## Usage
+
+BoxLink には主に2通りの使い方があります。
+
+### パターン1: `<BoxLink>` 自身を `<a>` にする
+
+`href` を指定すると `<BoxLink>` 自体が `<a>` タグとして出力されます。シンプルなカード全体リンクに最適。
+
+```jsx
+<BoxLink href="/article/1" p="30" bgc="base" bd bdrs="30" hov="o">
+  <Group fz="xl" fw="bold">Heading text</Group>
+  <Text lh="s" my-s="15">記事の抜粋テキスト...</Text>
+  <Group fz="s" c="text-2" ta="right" lh="1" my-s="10">
+    MORE →
+  </Group>
+</BoxLink>
+```
+
+```html
+<a class="is--boxLink -hov:o -p:30 -bgc:base -bd -bdrs:30" href="/article/1">
+  <p class="-fz:xl -fw:bold">Heading text</p>
+  <p class="-c:text-2 -lh:s -my-s:15">記事の抜粋テキスト...</p>
+  <p class="-fz:s -c:text-2 -ta:right -lh:1 -my-s:10">MORE →</p>
+</a>
+```
+
+### パターン2: `<div>` + 内部に `is--coverLink`
+
+`<BoxLink>` は `<div>` にしたまま、内部のアンカー要素に `is--coverLink` クラスを付けてボックス全体をクリック可能にします。**BoxLink 内部にさらに別のリンクを配置したい場合はこちらを選ぶこと**。
+
+```jsx
+<BoxLink as="section" p="30" bgc="base" bd bdrs="30" set="transition" hov="bxsh">
+  <Group fz="xl" fw="bold">
+    <Link isCoverLink href="/article/1">
+      Heading link text
+    </Link>
+  </Group>
+  <Text c="text-2" lh="s" my-s="15">記事の抜粋テキスト...</Text>
+  <Group my-s="10">
+    <a href="/tag/foo" className="-hov:o">Inner Link</a>
+  </Group>
+</BoxLink>
+```
+
+```html
+<div class="is--boxLink -hov:bxsh -p:30 -bgc:base -bd -bdrs:30 set--transition">
+  <div class="-fz:xl -fw:bold">
+    <a class="is--coverLink" href="/article/1">Heading link text</a>
+  </div>
+  <p class="-c:text-2 -lh:s -my-s:15">記事の抜粋テキスト...</p>
+  <div class="-my-s:10">
+    <a href="/tag/foo" class="-hov:o">Inner Link</a>
+  </div>
+</div>
+```
+
+## Opt-in スタイル
+
+### Tabキーフォーカス時のアウトラインをボックス全体に広げる
+
+パターン2 の場合、デフォルトでは Tab フォーカス時のアウトラインがリンクテキスト部分のみに表示されます。ボックス全体に広げたい場合は以下のCSSを追記してください。
+
+```css
+@supports selector(:has(*)) {
+  .is--boxLink:has(.is--coverLink:focus-visible) {
+    outline: auto 1px;
+    outline: auto 1px -webkit-focus-ring-color;
+  }
+  .is--coverLink:focus {
+    outline: 0;
+  }
+}
+```
+
+## 関連プリミティブ
+
+- [is--container](./is--container.md) — コンテナクエリの基準要素
+- [is--wrapper](./is--wrapper.md) — コンテンツ幅ラッパー

package/dist/data/guides/primitives/is--container.md

@@ -0,0 +1,46 @@
+# is--container / `<Container>`
+
+`container-type` を宣言してコンテナクエリを有効にするクラス。レスポンシブ Property Class（`p={['10', '30']}` のような配列指定）を使うとき、基準要素として必要になります。
+
+## 基本情報
+
+- クラス名: `is--container`
+- コンポーネント: `<Container>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_container.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--container/
+
+## 使い方
+
+`<Container>` は `<Lism isContainer>` のエイリアスです。`isContainer` Prop は他のコンポーネントにも使用できます（例: `<Flow isContainer>`）。
+
+| Prop | 出力 |
+|------|------|
+| `isContainer` | `.is--container` |
+
+## Usage
+
+### 使用例
+
+```jsx
+<Container isWrapper="s" p="20">
+  <Box bd p={['10', '30']}>
+    このBOXは、padding が切り替わります
+  </Box>
+</Container>
+```
+
+```html
+<div class="is--container is--wrapper -contentSize:s -p:20">
+  <div class="l--box -bd -p:10 -p_sm" style="--p_sm: var(--s30)">
+    このBOXは、padding が切り替わります
+  </div>
+</div>
+```
+
+子要素側は `p={['10', '30']}` のようなブレイクポイント配列指定にすることで、親の `is--container` を基準としたコンテナクエリで値が切り替わります。
+
+## 関連プリミティブ
+
+- [is--wrapper](./is--wrapper.md) — コンテンツ幅ラッパー（`isContainer` と併用可）
+- [l--flow](./l--flow.md) — 記事コンテンツ向けフローレイアウト
+- [l--box](./l--box.md) — 汎用ボックス

package/dist/data/guides/primitives/is--layer.md

@@ -0,0 +1,71 @@
+# is--layer / `<Layer>`
+
+`position: absolute` で親要素の上に被せて配置するオーバーレイ用クラス。親には `pos="relative"` が必要です。
+
+## 基本情報
+
+- クラス名: `is--layer`
+- コンポーネント: `<Layer>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_layer.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--layer/
+
+## 使い方
+
+`<Layer>` は `<Lism isLayer>` のエイリアスです。他コンポーネントにも `isLayer` Prop で付与できます（例: `<Frame isLayer>`）。
+
+## Usage
+
+### 基本的な使い方
+
+親要素に `pos="relative"` を指定し、子に `<Layer>` を置くことで上に重なるオーバーレイになります。
+
+```jsx
+<Box pos="relative" py="40">
+  <Text fz="2xl" fw="bold" ta="center">BACKGROUND</Text>
+  <Layer p="15" bgc="purple:10%">
+    <p>Layer Contents...</p>
+  </Layer>
+</Box>
+```
+
+```html
+<div class="l--box -pos:relative -py:40">
+  <p class="-fz:2xl -fw:bold -ta:center">BACKGROUND</p>
+  <div class="is--layer -p:15 -bgc" style="--bgc: color-mix(in srgb, var(--purple) 10%, transparent)">
+    <p>Layer Contents...</p>
+  </div>
+</div>
+```
+
+### backdrop-filter の活用
+
+`style` プロパティで `backdropFilter` を直接指定すると、背景をブラー・セピアなどの効果で加工できます。
+
+```jsx
+<Frame ar="2/1" pos="relative">
+  <img src="/img/a-1.jpg" alt="" width="960" height="640" />
+  <Layer style={{ backdropFilter: 'contrast(1.1) sepia(0.4)' }} />
+</Frame>
+```
+
+### メディアレイヤー（画像を背景にする）
+
+`<Frame isLayer>` でメディアをレイヤー化して背景画像として配置し、さらに `<Layer>` で暗幕を重ね、本文は `pos="relative"` で上にのせる構成が定番です。
+
+```jsx
+<Box pos="relative" py="50" px="40">
+  <Frame isLayer>
+    <Media src="/img/a-2.jpg" alt="" width="960" height="640" />
+  </Frame>
+  <Layer bgc="black:50%" />
+  <Stack pos="relative" g="30" c="white">
+    <p>本文テキスト...</p>
+  </Stack>
+</Box>
+```
+
+## 関連プリミティブ
+
+- [l--frame](./l--frame.md) — `isLayer` 併用でメディア背景のレイヤー化
+- [l--grid](./l--grid.md) — `ga="1/1"` で position を使わずに重ね配置する代替パターン
+- [l--center](./l--center.md) — レイヤー内のコンテンツ中央寄せ

package/dist/data/guides/primitives/is--wrapper.md

@@ -0,0 +1,87 @@
+# is--wrapper / `<Wrapper>`
+
+直下のコンテンツ幅を一括制御するクラス。`max-width` とセンタリングを担い、記事・セクションのコンテンツ幅の統一に使います。
+
+## 基本情報
+
+- クラス名: `is--wrapper`
+- コンポーネント: `<Wrapper>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_wrapper.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--wrapper/
+
+## 使い方
+
+`<Wrapper>` は `<Lism isWrapper>` のエイリアスです。`isWrapper` Prop は他のコンポーネントにも使用できます（例: `<Flow isWrapper>`）。
+
+| 指定 | 出力 |
+|------|------|
+| `isWrapper` | `.is--wrapper` |
+| `isWrapper="s"` | `.is--wrapper .-contentSize:s` |
+| `isWrapper="l"` | `.is--wrapper .-contentSize:l` |
+| `isWrapper="20rem"`（任意値） | `.is--wrapper` + `style="--contentSize: 20rem"` |
+
+## 専用Props
+
+| Prop | 説明 |
+|------|------|
+| `contentSize` | コンテンツサイズ。`s` / `l` / トークン / 任意値 |
+
+```jsx
+// 下記の ① と ② は同じ結果
+<Flow isWrapper="s" isContainer>...</Flow>
+<Wrapper contentSize="s" layout="flow" isContainer>...</Wrapper>
+```
+
+## Usage
+
+### `layout` との組み合わせ
+
+```jsx
+<Wrapper layout="flow" p="20">
+  <p>Content</p>
+  <p>Content</p>
+</Wrapper>
+```
+
+```html
+<div class="l--flow is--wrapper -p:20">
+  <p>Content</p>
+  <p>Content</p>
+</div>
+```
+
+### `contentSize` 指定
+
+```jsx
+<Wrapper contentSize="s" layout="flow" p="20">
+  <p>Content</p>
+  <p>Content</p>
+</Wrapper>
+```
+
+```html
+<div class="l--flow is--wrapper -contentSize:s -p:20">
+  <p>Content</p>
+  <p>Content</p>
+</div>
+```
+
+### 任意値のコンテンツ幅
+
+```jsx
+<Lism isWrapper="20rem" p="20">
+  <div>Contents...</div>
+</Lism>
+```
+
+```html
+<div class="is--wrapper -p:20" style="--contentSize: 20rem">
+  <div>Contents...</div>
+</div>
+```
+
+## 関連プリミティブ
+
+- [is--container](./is--container.md) — コンテナクエリ基準（`isContainer` と併用可）
+- [l--flow](./l--flow.md) — 記事フローレイアウト（`layout="flow"` で結合）
+- [l--box](./l--box.md) — 汎用ボックス

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

@@ -0,0 +1,31 @@
+# l--box / `<Box>`
+
+コンテンツをグループ化するだけのシンプルなクラス。汎用的な箱として、パディング・ボーダー・背景色などの指定に使います。
+
+## 基本情報
+
+- クラス名: `l--box`
+- コンポーネント: `<Box>`
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--box/
+
+## Usage
+
+### 基本的な使い方
+
+```jsx
+<Box p="30" bgc="base-2" bxsh="10" bdrs="10">
+  <p>コンテンツ...</p>
+</Box>
+```
+
+```html
+<div class="l--box -p:30 -bgc:base-2 -bxsh:10 -bdrs:10">
+  <p>コンテンツ...</p>
+</div>
+```
+
+## 関連プリミティブ
+
+- [l--flow](./l--flow.md) — テキスト主体のフローレイアウト
+- [l--stack](./l--stack.md) — Flex 縦並び
+- [is--wrapper](./is--wrapper.md) — コンテンツ幅ラッパー

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

@@ -0,0 +1,55 @@
+# l--center / `<Center>`
+
+要素を上下左右中央揃えで配置するクラス。高さの有無で水平中央のみ / 上下左右中央を自動的に切り替えます。
+
+## 基本情報
+
+- クラス名: `l--center`
+- コンポーネント: `<Center>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_center.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--center/
+
+## 動作の仕組み
+
+- 高さを持たない場合: コンテンツを**水平方向のみ**中央揃え（内在的な中央寄せ。長いテキストは左寄せのまま）
+- 高さ・アスペクト比（`h`, `min-h`, `ar` など）が設定されている場合: **垂直方向も中央揃え**
+
+## Usage
+
+### 水平方向に中央配置
+
+```jsx
+<Center bd p="30">
+  <Text fz="l">TEXT</Text>
+</Center>
+```
+
+```html
+<div class="l--center -bd -p:30">
+  <p class="-fz:l">TEXT</p>
+</div>
+```
+
+### 上下左右中央に配置する
+
+`ar` や高さを指定すると、垂直方向に対しても中央揃えになります。
+
+```jsx
+<Center g="10" ar="3/2" bd>
+  <Text fz="l">TEXT</Text>
+  <Text fz="s">Lorem ipsum dolor sit amet.</Text>
+</Center>
+```
+
+```html
+<div class="l--center -bd -g:10 -ar:3/2">
+  <p class="-fz:l">TEXT</p>
+  <p class="-fz:s">Lorem ipsum dolor sit amet.</p>
+</div>
+```
+
+## 関連プリミティブ
+
+- [l--frame](./l--frame.md) — アスペクト比付きメディアフレーム（`<Center>` と組み合わせられる）
+- [l--stack](./l--stack.md) — `ai="center"` で水平中央の内在的な中央寄せが可能
+- [l--grid](./l--grid.md) — `ga="1/1"` で重ね配置のオーバーレイ

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

@@ -0,0 +1,38 @@
+# l--cluster / `<Cluster>`
+
+複数の要素を横方向に並べ、数が多ければ自動的に折り返すクラス。タグリスト・ボタングループなどに使います。
+
+## 基本情報
+
+- クラス名: `l--cluster`
+- コンポーネント: `<Cluster>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_cluster.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--cluster/
+
+## Usage
+
+### 基本的な使い方
+
+```jsx
+<Cluster g="15">
+  <Lism bd px="10" bdrs="10">Lorem</Lism>
+  <Lism bd px="10" bdrs="10">ipsum</Lism>
+  <Lism bd px="10" bdrs="10">Dolor</Lism>
+  <Lism bd px="10" bdrs="10">Sit amet</Lism>
+</Cluster>
+```
+
+```html
+<div class="l--cluster -g:15">
+  <span class="-bd -px:10 -bdrs:10">Lorem</span>
+  <span class="-bd -px:10 -bdrs:10">ipsum</span>
+  <span class="-bd -px:10 -bdrs:10">Dolor</span>
+  <span class="-bd -px:10 -bdrs:10">Sit amet</span>
+</div>
+```
+
+## 関連プリミティブ
+
+- [l--flex](./l--flex.md) — 汎用 Flex 横並び（折り返しなしが基本）
+- [l--stack](./l--stack.md) — Flex 縦並び
+- [l--switchCols](./l--switchCols.md) — ブレイクポイントで縦横切り替えるカラム

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

@@ -0,0 +1,72 @@
+# l--columns / `<Columns>`
+
+ブレイクポイントごとに指定した列数で表示できるカラムクラス。等幅の複数カラムを定義したい場合に使います。
+
+## 基本情報
+
+- クラス名: `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/
+
+## 専用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) — 列数×行数を指定する均等タイル
+- [l--fluidCols](./l--fluidCols.md) — カラム幅ベースの自動段組
+- [l--switchCols](./l--switchCols.md) — 複数列 ↔ 1列切り替え