@lism-css/mcp 0.15.0 → 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/data/docs-index.json +63 -36
  2. package/dist/data/guides/SKILL.md +136 -24
  3. package/dist/data/guides/antipatterns.md +318 -0
  4. package/dist/data/guides/base-styles.md +3 -5
  5. package/dist/data/guides/components-core.md +8 -10
  6. package/dist/data/guides/components-ui.md +12 -4
  7. package/dist/data/guides/css-rules.md +29 -29
  8. package/dist/data/guides/customize.md +80 -26
  9. package/dist/data/guides/naming.md +13 -8
  10. package/dist/data/guides/primitive-class.md +79 -4
  11. package/dist/data/guides/primitives/a--decorator.md +1 -1
  12. package/dist/data/guides/primitives/a--divider.md +1 -1
  13. package/dist/data/guides/primitives/a--icon.md +1 -1
  14. package/dist/data/guides/primitives/a--spacer.md +1 -1
  15. package/dist/data/guides/primitives/l--autoColumns.md +71 -0
  16. package/dist/data/guides/primitives/l--box.md +1 -1
  17. package/dist/data/guides/primitives/l--center.md +1 -1
  18. package/dist/data/guides/primitives/l--cluster.md +2 -2
  19. package/dist/data/guides/primitives/l--columns.md +3 -3
  20. package/dist/data/guides/primitives/l--flex.md +1 -1
  21. package/dist/data/guides/primitives/l--flow.md +4 -4
  22. package/dist/data/guides/primitives/l--frame.md +1 -1
  23. package/dist/data/guides/primitives/l--grid.md +2 -2
  24. package/dist/data/guides/primitives/l--stack.md +1 -1
  25. package/dist/data/guides/primitives/{l--switchCols.md → l--switchColumns.md} +18 -18
  26. package/dist/data/guides/primitives/l--tileGrid.md +2 -2
  27. package/dist/data/guides/primitives/{l--sideMain.md → l--withSide.md} +41 -19
  28. package/dist/data/guides/prop-responsive.md +1 -1
  29. package/dist/data/guides/property-class/bd.md +4 -4
  30. package/dist/data/guides/property-class/hov.md +18 -18
  31. package/dist/data/guides/property-class/max-sz.md +20 -16
  32. package/dist/data/guides/property-class.md +23 -12
  33. package/dist/data/guides/set-class.md +2 -2
  34. package/dist/data/guides/tokens.md +13 -9
  35. package/dist/data/guides/trait-class/has--gutter.md +2 -2
  36. package/dist/data/guides/trait-class/has--mask.md +2 -2
  37. package/dist/data/guides/trait-class/has--snap.md +2 -2
  38. package/dist/data/guides/trait-class/has--transition.md +2 -2
  39. package/dist/data/guides/trait-class/is--boxLink.md +2 -2
  40. package/dist/data/guides/trait-class/is--container.md +13 -5
  41. package/dist/data/guides/trait-class/is--layer.md +5 -5
  42. package/dist/data/guides/trait-class/is--wrapper.md +23 -8
  43. package/dist/data/guides/trait-class.md +2 -2
  44. package/dist/data/guides/utility-class.md +9 -8
  45. package/dist/data/meta.js +2 -2
  46. package/dist/tools/get-guide.js +8 -1
  47. package/package.json +1 -1
  48. package/dist/data/guides/primitives/l--fluidCols.md +0 -71
@@ -6,8 +6,8 @@
6
6
 
7
7
  - クラス名: `has--mask`
8
8
  - Lism props: `hasMask`(`<Lism hasMask>` 等)
9
- - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_hasMask.scss
10
- - ドキュメント(人間向け): https://lism-css.com/docs/trait-class/#has--mask
9
+ - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/has/_mask.scss
10
+ - 公式ドキュメント: https://lism-css.com/docs/trait-class.md#has--mask
11
11
 
12
12
  ## SCSS 定義
13
13
 
@@ -6,8 +6,8 @@
6
6
 
7
7
  - クラス名: `has--snap`
8
8
  - Lism props: `hasSnap`(`<Lism hasSnap>` 等)
9
- - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_hasSnap.scss
10
- - ドキュメント(人間向け): https://lism-css.com/docs/trait-class/#has--snap
9
+ - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/has/_snap.scss
10
+ - 公式ドキュメント: https://lism-css.com/docs/trait-class.md#has--snap
11
11
 
12
12
  ## SCSS 定義
13
13
 
@@ -6,8 +6,8 @@
6
6
 
7
7
  - クラス名: `has--transition`
8
8
  - Lism props: `hasTransition`(`<Lism hasTransition>` / `<Box hasTransition>` 等)
9
- - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_hasTransition.scss
10
- - ドキュメント(人間向け): https://lism-css.com/docs/trait-class/#has--transition
9
+ - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/has/_transition.scss
10
+ - 公式ドキュメント: https://lism-css.com/docs/trait-class.md#has--transition
11
11
 
12
12
  ## SCSS 定義
13
13
 
@@ -6,8 +6,8 @@
6
6
 
7
7
  - クラス名: `is--boxLink`
8
8
  - コンポーネント: `<BoxLink>`
9
- - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_boxLink.scss
10
- - ドキュメント(人間向け): https://lism-css.com/docs/trait-class/is--boxLink/
9
+ - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/is/_boxLink.scss
10
+ - 公式ドキュメント: https://lism-css.com/docs/trait-class/is--boxLink.md
11
11
 
12
12
  ## 専用Props
13
13
 
@@ -6,8 +6,8 @@
6
6
 
7
7
  - クラス名: `is--container`
8
8
  - コンポーネント: `<Container>`
9
- - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_container.scss
10
- - ドキュメント(人間向け): https://lism-css.com/docs/trait-class/is--container/
9
+ - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/is/_container.scss
10
+ - 公式ドキュメント: https://lism-css.com/docs/trait-class/is--container.md
11
11
 
12
12
  ## 使い方
13
13
 
@@ -15,7 +15,7 @@
15
15
 
16
16
  | Prop | 出力 |
17
17
  |------|------|
18
- | `isContainer` | `.is--container` |
18
+ | `isContainer` | `is--container` |
19
19
 
20
20
  ## Usage
21
21
 
@@ -39,8 +39,16 @@
39
39
 
40
40
  子要素側は `p={['10', '30']}` のようなブレイクポイント配列指定にすることで、親の `is--container` を基準としたコンテナクエリで値が切り替わります。
41
41
 
42
+ ## `--sz--bleed` の提供
43
+
44
+ 最外側の `is--container` は直下の子要素に `--sz--bleed: 100cqi` をセットします。`-max-sz:bleed` はこの値を参照しており、最外側の `is--container` 基準の幅まで広がります(ネストされた `is--container` は `--sz--bleed` を再上書きしないため、内側の子要素は外側の値を inherit で参照します)。
45
+
46
+ `has--gutter` と併用した場合は `calc(100cqi + var(--gutter-size) * 2)` に自動調整され、gutter 分を含めた端〜端の幅になります。
47
+
48
+ `@property --sz--bleed` の `initial-value` は `100svi` のため、`is--container` が祖先に存在しない場合はビューポート幅まで広がる fallback として動作します。
49
+
42
50
  ## 関連プリミティブ
43
51
 
44
52
  - [is--wrapper](./is--wrapper.md) — コンテンツ幅ラッパー(`isContainer` と併用可)
45
- - [l--flow](./l--flow.md) — 記事コンテンツ向けフローレイアウト
46
- - [l--box](./l--box.md) — 汎用ボックス
53
+ - [l--flow](../primitives/l--flow.md) — 記事コンテンツ向けフローレイアウト
54
+ - [l--box](../primitives/l--box.md) — 汎用ボックス
@@ -6,8 +6,8 @@
6
6
 
7
7
  - クラス名: `is--layer`
8
8
  - コンポーネント: `<Layer>`
9
- - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_layer.scss
10
- - ドキュメント(人間向け): https://lism-css.com/docs/trait-class/is--layer/
9
+ - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/is/_layer.scss
10
+ - 公式ドキュメント: https://lism-css.com/docs/trait-class/is--layer.md
11
11
 
12
12
  ## 使い方
13
13
 
@@ -66,6 +66,6 @@
66
66
 
67
67
  ## 関連プリミティブ
68
68
 
69
- - [l--frame](./l--frame.md) — `isLayer` 併用でメディア背景のレイヤー化
70
- - [l--grid](./l--grid.md) — `ga="1/1"` で position を使わずに重ね配置する代替パターン
71
- - [l--center](./l--center.md) — レイヤー内のコンテンツ中央寄せ
69
+ - [l--frame](../primitives/l--frame.md) — `isLayer` 併用でメディア背景のレイヤー化
70
+ - [l--grid](../primitives/l--grid.md) — `ga="1/1"` で position を使わずに重ね配置する代替パターン
71
+ - [l--center](../primitives/l--center.md) — レイヤー内のコンテンツ中央寄せ
@@ -6,8 +6,8 @@
6
6
 
7
7
  - クラス名: `is--wrapper`
8
8
  - コンポーネント: `<Wrapper>`
9
- - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_wrapper.scss
10
- - ドキュメント(人間向け): https://lism-css.com/docs/trait-class/is--wrapper/
9
+ - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/is/_wrapper.scss
10
+ - 公式ドキュメント: https://lism-css.com/docs/trait-class/is--wrapper.md
11
11
 
12
12
  ## 使い方
13
13
 
@@ -15,10 +15,10 @@
15
15
 
16
16
  | 指定 | 出力 |
17
17
  |------|------|
18
- | `isWrapper` | `.is--wrapper` |
19
- | `isWrapper="s"` | `.is--wrapper .-contentSize:s` |
20
- | `isWrapper="l"` | `.is--wrapper .-contentSize:l` |
21
- | `isWrapper="20rem"`(任意値) | `.is--wrapper` + `style="--contentSize: 20rem"` |
18
+ | `isWrapper` | `is--wrapper` |
19
+ | `isWrapper="s"` | `is--wrapper -contentSize:s` |
20
+ | `isWrapper="l"` | `is--wrapper -contentSize:l` |
21
+ | `isWrapper="20rem"`(任意値) | `is--wrapper` + `style="--contentSize: 20rem"` |
22
22
 
23
23
  ## 専用Props
24
24
 
@@ -80,8 +80,23 @@
80
80
  </div>
81
81
  ```
82
82
 
83
+ ## 直下の子要素の挙動
84
+
85
+ `is--wrapper` 直下の子要素には次のスタイルが当たる:
86
+
87
+ ```scss
88
+ .is--wrapper > * {
89
+ inline-size: 100%;
90
+ max-inline-size: min(100%, var(--contentSize));
91
+ margin-inline: auto;
92
+ }
93
+ ```
94
+
95
+ - `inline-size: 100%` により、自然幅が `--contentSize` 未満の要素(短い段落、`<table>` など)も常に親幅まで広げてから `max-inline-size` で制限される。これにより `l--stack` などの flex 縦並び配下でも横幅が揃い、ガタつきが起きない
96
+ - `<table>` を直下に置くと内容依存の自然幅にはならず、常に wrapper 幅まで広がる。テーブルの自然幅を保ちたい場合は `is--wrapper` を直接の親にしないように、間に別の要素を挟む
97
+
83
98
  ## 関連プリミティブ
84
99
 
85
100
  - [is--container](./is--container.md) — コンテナクエリ基準(`isContainer` と併用可)
86
- - [l--flow](./l--flow.md) — 記事フローレイアウト(`layout="flow"` で結合)
87
- - [l--box](./l--box.md) — 汎用ボックス
101
+ - [l--flow](../primitives/l--flow.md) — 記事フローレイアウト(`layout="flow"` で結合)
102
+ - [l--box](../primitives/l--box.md) — 汎用ボックス
@@ -9,7 +9,7 @@ Lism CSS では、要素に対して宣言的に「役割」や「機能」を
9
9
  - [`is--` Trait(役割宣言)](#is-- trait役割宣言)
10
10
  - [`has--` Trait(機能付与)](#has-- trait機能付与)
11
11
 
12
- [詳細](https://lism-css.com/docs/trait-class/)
12
+ [詳細](https://lism-css.com/docs/trait-class.md)
13
13
 
14
14
  ---
15
15
 
@@ -35,7 +35,7 @@ Lism CSS では、要素に対して宣言的に「役割」や「機能」を
35
35
  | `is--boxLink` | ボックス全体をクリッカブルなリンク領域にする。自身を`a`タグにして利用するか、もしくは自身を`div`にして内部の`a`タグに`is--coverLink`を付与して使う |
36
36
  | `is--coverLink` | 親要素全体に被さるクリック領域を持つリンク(`::before` を `inset: 0` で広げる)。`is--boxLink` と併用する |
37
37
  | `is--skipFlow` | `l--flow` 直下で使用し、次の兄弟要素のフロー余白をゼロにする。`l--flow`の中にあるが`position:absolute`にしたい要素などに使用する |
38
- | `is--side` | `l--sideMain` 直下で使用し、サイド側の要素であることを示す |
38
+ | `is--side` | `l--withSide` 直下で使用し、サイド側の要素であることを示す |
39
39
 
40
40
  Lism コンポーネントでは `isContainer`, `isLayer` 等の Props として利用できます(例: `<Lism isContainer>`)。
41
41
 
@@ -16,7 +16,7 @@ Lism コンポーネントでの `util` prop による指定方法は [component
16
16
  - [Opt-in ユーティリティ](#opt-in-ユーティリティ)
17
17
  - [ユーザー定義のユーティリティクラス](#ユーザー定義のユーティリティクラス)
18
18
 
19
- [詳細](https://lism-css.com/docs/utility-class/)
19
+ [詳細](https://lism-css.com/docs/utility-class.md)
20
20
 
21
21
  ---
22
22
 
@@ -26,11 +26,12 @@ Lism コンポーネントでの `util` prop による指定方法は [component
26
26
 
27
27
  | クラス | 用途 | ソースファイル |
28
28
  |--------|------|---------------|
29
- | `u--trim` | ハーフレディングのネガティブマージンでテキスト上下の余白を詰める | [`_trimHL.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trimHL.scss) |
30
- | `u--trimChildren` | 子要素すべてにハーフレディングトリムを適用(`img`, `figure`, `button` は除外) | [`_trimHL.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trimHL.scss) |
29
+ | `u--trim` | ハーフレディングのネガティブマージンでテキスト上下の余白を詰める | [`_trim.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trim.scss) |
30
+ | `u--trimAll` | 直下の子要素(`:empty`, `figure`, `picture`, `video`, `button`, `textarea`, `table` を除く)にハーフレディングトリムを一括適用する除外方式のクラス | [`_trim.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trim.scss) |
31
31
  | `u--cbox` | `--keycolor` を使い `color-mix()` で `--c` / `--bgc` / `--bdc` を自動生成する色付きボックス | [`_cbox.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_cbox.scss) |
32
- | `u--collapseGrid` | Grid / Flex の子要素間に `box-shadow` で境界線を表現する | [`_itemDivider.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_itemDivider.scss) |
33
- | `u--srOnly` | スクリーンリーダー専用(視覚的に非表示)。`clip-path: inset(50%)` で実装 | [`_hidden.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_hidden.scss) |
32
+ | `u--divide` | Grid / Flex の子要素**間**にのみ `box-shadow` で区切り線を表示する | [`_divide.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_divide.scss) |
33
+ | `u--cells` | Grid / Flex の各子要素を `box-shadow` で枠囲みし、table セル風に表示する | [`_divide.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_divide.scss) |
34
+ | `u--srOnly` | スクリーンリーダー専用(視覚的に非表示)。`clip-path: inset(50%)` で実装 | [`_srOnly.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_srOnly.scss) |
34
35
  | `u--clipText` | テキストで背景をクリッピング(`background-clip: text`) | [`_clipText.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_clipText.scss) |
35
36
 
36
37
 
@@ -43,8 +44,8 @@ Lism コンポーネントでの `util` prop による指定方法は [component
43
44
  <!-- u--trim: テキスト余白の詰め -->
44
45
  <p class="u--trim">テキスト...</p>
45
46
 
46
- <!-- u--collapseGrid: グリッド子要素間の境界線 -->
47
- <div class="l--grid u--collapseGrid" style="--gtc: 1fr 1fr">
47
+ <!-- u--divide: グリッド子要素間の区切り線 -->
48
+ <div class="l--grid u--divide" style="--gtc: 1fr 1fr">
48
49
  <div>A</div>
49
50
  <div>B</div>
50
51
  </div>
@@ -54,7 +55,7 @@ Lism コンポーネントでの `util` prop による指定方法は [component
54
55
  // JSX での使用(className で指定)
55
56
  <Lism className="u--cbox" keycolor="red" bd p="20">...</Lism>
56
57
  <Text className="u--trim">テキスト...</Text>
57
- <Grid className="u--collapseGrid" gtc="1fr 1fr">...</Grid>
58
+ <Grid className="u--divide" gtc="1fr 1fr">...</Grid>
58
59
  ```
59
60
 
60
61
 
package/dist/data/meta.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export const meta = {
2
- generatedAt: '2026-04-21',
3
- sourceCommit: '0e370dbf',
2
+ generatedAt: '2026-05-09',
3
+ sourceCommit: 'e7352b46',
4
4
  docsVersion: '0.1.0',
5
5
  };
@@ -15,10 +15,17 @@ const GUIDE_TOPICS = {
15
15
  },
16
16
  'base-styles': { file: 'base-styles.md', label: 'Base styling, reset CSS, HTML element styles' },
17
17
  'set-class': { file: 'set-class.md', label: 'Set classes (set--plain, set--var:bxsh, set--var:hov, etc.)' },
18
- 'primitive-class': { file: 'primitive-class.md', label: 'Primitive class prefixes (is--, l--, a--) and Component class (c--)' },
18
+ 'primitive-class': {
19
+ file: 'primitive-class.md',
20
+ label: 'Primitive class prefixes (is--, l--, a--) and Component class (c--), with column-layout primitive selection guide',
21
+ },
19
22
  'utility-class': { file: 'utility-class.md', label: 'Utility classes (u--trim, u--cbox, etc.)' },
20
23
  'css-rules': { file: 'css-rules.md', label: 'CSS methodology, layer structure, naming conventions' },
21
24
  responsive: { file: 'prop-responsive.md', label: 'Responsive design, breakpoints, container queries' },
25
+ antipatterns: {
26
+ file: 'antipatterns.md',
27
+ label: 'AI code-generation antipatterns: token typos, prop type mistakes, layout choice errors, responsive omissions',
28
+ },
22
29
  };
23
30
  const TOPIC_DESCRIPTION = Object.entries(GUIDE_TOPICS)
24
31
  .map(([key, { label }]) => `- ${key}: ${label}`)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lism-css/mcp",
3
- "version": "0.15.0",
3
+ "version": "0.17.0",
4
4
  "description": "MCP server for lism-css documentation and API reference.",
5
5
  "type": "module",
6
6
  "bin": {
@@ -1,71 +0,0 @@
1
- # l--fluidCols / `<FluidCols>`
2
-
3
- カラム要素が指定した幅より小さくならないように自動で折り返す、**ブレイクポイント非依存の段組みクラス**。`auto-fit` / `auto-fill` を使った流動カラムを簡潔に記述できます。
4
-
5
- ## 基本情報
6
-
7
- - クラス名: `l--fluidCols`
8
- - コンポーネント: `<FluidCols>`
9
- - SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_fluidCols.scss
10
- - ドキュメント(人間向け): https://lism-css.com/docs/primitives/l--fluidCols/
11
-
12
- ## 専用Props
13
-
14
- | Prop | CSS変数 | 説明 |
15
- |------|--------|------|
16
- | `cols` | `--cols` | カラムが維持する最小幅を指定(`16em`, `320px` など) |
17
- | `autoFill` | `--autoMode` | `auto-fill` モードに切り替え(デフォルトは `auto-fit`) |
18
-
19
- ## Usage
20
-
21
- ### `--cols`でサイズを指定する
22
-
23
- ```jsx
24
- <FluidCols cols="16em" g="20">
25
- <Lism as="div" p="20" bd>Item A</Lism>
26
- <Lism as="div" p="20" bd>Item B</Lism>
27
- <Lism as="div" p="20" bd>Item C</Lism>
28
- <Lism as="div" p="20" bd>Item D</Lism>
29
- </FluidCols>
30
- ```
31
-
32
- ```html
33
- <div class="l--fluidCols -g:20" style="--cols: 16em">
34
- <div class="-p:20 -bd">Item A</div>
35
- <div class="-p:20 -bd">Item B</div>
36
- <div class="-p:20 -bd">Item C</div>
37
- <div class="-p:20 -bd">Item D</div>
38
- </div>
39
- ```
40
-
41
- ### `auto-fill`を使用する
42
-
43
- `l--fluidCols` では、`grid-template-columns` の `repeat()` 関数の第一引数を `--autoMode` で指定できます(デフォルトは `auto-fit`)。`--autoMode:auto-fill`(`autoFill`)を指定することで、要素数が少ない時の挙動が変わります。
44
-
45
- ```jsx
46
- <FluidCols cols="12em" autoFill g="20" fz="s">
47
- <Lism as="div" p="20" bd>auto-fill</Lism>
48
- <Lism as="div" p="20" bd>auto-fill</Lism>
49
- </FluidCols>
50
- <FluidCols cols="12em" g="20" fz="s">
51
- <Lism as="div" p="20" bd>auto-fit</Lism>
52
- <Lism as="div" p="20" bd>auto-fit</Lism>
53
- </FluidCols>
54
- ```
55
-
56
- ```html
57
- <div class="l--fluidCols -g:20 -fz:s" style="--cols:12em; --autoMode:auto-fill">
58
- <div class="-p:20 -bd">auto-fill</div>
59
- <div class="-p:20 -bd">auto-fill</div>
60
- </div>
61
- <div class="l--fluidCols -g:20 -fz:s" style="--cols:12em">
62
- <div class="-p:20 -bd">auto-fit</div>
63
- <div class="-p:20 -bd">auto-fit</div>
64
- </div>
65
- ```
66
-
67
- ## 関連プリミティブ
68
-
69
- - [l--columns](./l--columns.md) — ブレイクポイント指定の等幅カラム
70
- - [l--switchCols](./l--switchCols.md) — 複数列 ↔ 1列の2段階切り替え
71
- - [l--sideMain](./l--sideMain.md) — メイン幅ベースの2カラム自動切替