グリッドシステムとモジュール性

1）なぜメッシュなのか

• 設計および開発を加速します（共通言語：「12コラム、gutter 24」）、
• 認知負荷（でもリズム、安定したライン）を軽減します),
• ページ間のコンポーネントの移植性を向上
• 「マイクロレイ」なしでモジュラーライブラリを構築することができます。

2）基本的なメッシュ要素

コンテナ-最大コンテンツ幅、中心領域。
列-モジュールを配置するための垂直領域。
Gutter-列の間の水平空間。
マージン-コンテナの左右にある外部フィールド。
行/トラック-水平ガイド（CSSグリッド-ライン/トラック）。
ベースライン-垂直タイポグラフィグリッド。

推薦された縦のリズム：8-pt（ニュアンスのための時々4-pt）、サイズおよびインデントの単位は4/8の倍数です。

3）ブレークポイントとコンテナ

• ラスターコンテナ（修正。max-width）大画面、流体-モバイル。
• 溝はスムーズに大きなブレークポイントに増加することができます。
• コラム-「コアセット」として4/6/8/12。

4）モジュール性および密度

モジュール-ベースラインの高さの1..N列と複数の列を占めるコンテンツのブロック。

• 慰め（ダッシュボード、読書）：大きいフォント、インデント16-24。
• コンパクト（テーブル、プロモード）：フォント+0/ − 1 px、垂直インデント− 4/ − 8、行の高さは固定（8の倍数）。

コンポーネントには、最小密度の2つのプリセットがあります。

5）タイポグラフィとベースライングリッド

基本的な線の高さ（例えば24 px）を選択し、要素の高さを同期します（ボタン40/48/56 pxはベースラインの倍数です）。
見出しアンカー垂直リズム：上/下のインデントは8の倍数です。
アイコンをテキストの高さに合わせます。

6）レイアウトテンプレート

6.1枚のカード

グリッド：モザイク（修正。カード幅）または列（カード=N列）。
ロード時に「ジャンプ」を避けるための最小コンテンツの高さ。カード内のスケルトン。
内部パディング：ブレークポイントに応じて16/20/24します。

6.2テーブル

完全な幅の容器；水平スクロール時に最初のカラム/キャップをフリーズします。
セルはベースライン倍です。数字の列は、数字/小数点以下で整列されます。
XSでは、列が多すぎると横スクロールではなく「積み重ねレイアウト」になります。

6.3つのフォーム

XS/SMの単列、MD+の2列または3列（タブ/セクションのロジックを考慮して）。
Field+label+ヘルプテキストは共通のモジュールに収まります（高さは8の倍数です）。

6.4つのダッシュボード

安定のための固定トラックおよび雲（区域）が付いている格子。
ウィジェットには、列の最小幅と最大幅があります。高さはベースラインの倍数です。
Resayingの場合-列の数が変わり、任意にウィジェットを分割しないでください。

7）適応性、自動レイアウトおよび行動

グリッドの前のコンテンツ：グリッドは、グリッドを壊すのではなく、コンテンツに調整します。

• カード/リストの制約（左/右/中央）と自動レイアウトを使用します。
• XS/SM/MD/LG（パディングの変更、スロット順序）のためのサポートコンポーネントオプション。

• セクションレベルで-CSSグリッド（エリア、列、行）。
• コンポーネントの内部-Flex（軸、スペースのバランス）。

8） CSSグリッド/フレックス-ワークショップ

css
.container {
max-width: 1280px; margin: 0 auto; padding: 0 16px;
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-4 { grid-column: span 4; }
@media (max-width: 1199px) {
.container { grid-template-columns: repeat(8, 1fr); gap: 20px; }
.col-4 {grid-column: span 8; }/full-width card/
}
@media (max-width: 839px) {
.container { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}
@media (max-width: 599px) {
.container { grid-template-columns: repeat(4, 1fr); }
}

css
.dashboard {
display: grid; gap: 24px;
grid-template:
"kpi kpi chart chart" auto
"tbl tbl chart chart" 1fr / 1fr 1fr 1fr 1fr;
}
.kpi  { grid-area: kpi; }
.chart { grid-area: chart; }
.tbl  { grid-area: tbl; }
@media (max-width: 1199px) {
.dashboard { grid-template:
"kpi" auto "chart" auto "tbl" 1fr / 1fr; }
}

9）インデントとトークン

設計システムでスケールをキャプチャします。

json
{
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32, "3xl": 48 },
"container": { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"gutter": { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"columns": { "xs": 4, "sm": 6, "md": 8, "lg": 12 }
}

• コンポーネントの内部インデントは'space'からです。
• コンテナの外側のフィールドは'gutter'/'margin'です。
• 要素の高さは8 （40/48/56）の倍数です。

10）モジュラー部品

• 各ブレークポイントのカラム数を知ることができます。
• 最小/最大寸法を持っています。
• 「魔法」ピクセルに依存しないでください-トークンのみ；
• ベースライン上の内部グリッド（タイトル、コンテンツ、フッター）を保持します。

11）画像とメディアの部分

アスペクト比を修正（例：16/9、4/3、1/1）プレビューとカード用。

css
.media { aspect-ratio: 16 / 9; object-fit: cover; }

XSでは、フルブリード（エッジ周りの画像）をプロモーションにのみ使用し、残りのコンテンツはコンテナに従います。
画像テキスト-スリップ/オーバーレイ、コントラスト≥ AAのみ。

12） RTLとローカライズ

グリッド方向は、インデント/アイコンの'dir=「rtl」'と'：dir （rtl）' -rulesをミラーします。
テーブル内の列の順序と凍結列-ミラーリングを検討してください。
ラインと転送の長さは、モジュールの高さを変更することができます-在庫を置きます。

13） iGamingの詳細

プロモーションエリアとバナー：大きなモジュールを備えた独立したグリッド。テキストは常にプレート上にあり、重要な通知（18+、制限、リスク）のためのAAAコントラスト。
リーダー/評価：固定された最初の列と粘着性のあるヘッダーを持つテーブル、表形式の数字（表形式の数字）、行の高さは8の倍数です。
プレイヤー/操作のダッシュボード：ウィジェット（セッション、預金、RTP、 Net Deposits）は12グリッドで3〜6列を占めます。カスケードはMD/SMで再構築します。
トーナメントカード：カードのグリッド3 × N （LG）、 2 × N （MD）、 1 × N （SM/XS）；恒久的な場所にCTA。

14）アクセシビリティとフォーカス

フォーカスリングはリズムを壊すべきではありません。アウトラインオフセットまたは内部擬似要素を追加します。
最小クリックサイズ：44 × 44（モバイル）/32 × 32（デスクトップ）。
配置のみで意味をエンコードしないでください。テキストラベルとaria属性を保存します。

15）パフォーマンス

ネストグリッドの深さを減らす：1つのメイングリッドセクション+内部の曲がり。
何百枚ものカードに重い影/マスクを避けてください。リストでフラットスタイルを使用します。
メディアコンテンツの遅延ロード；固定比率はCLSを防ぎます。

16） Antipatterns

「Grid to taste」の一貫性→各ページで崩れます。
溝は断面によって任意に変化します。
一貫性のない密度（1画面でコンパクトで快適）。
魔法の幅に依存するコンポーネント（カラム/トークンなし）。
代替レイアウトなしでモバイルで水平スクロールするテーブル。
ダイとコントラスト制御なしの画像内のテキスト。

17） QAチェックリスト

［構造］

• カラム/コンテナ/マージンはブレークポイントに対応します。
• Gutterはページ内で安定しています。
• 高さとインデントは8の倍数です。

［コンポーネント］

• 列幅（XS。。XL）とmin/maxが定義されます。
• 内部グリッドはベースラインと整列します。

テーブル/フォーム

• 粘着性がある帽子/最初のコラム；XS上のスタックモード。
• フォームフィールドはベースラインの倍数です。label/help textは「ジャンプ」しません。

A11y

• フォーカススタイルはリズムを壊さない。クリックゾーン≥最小限。

パフォーマンス

• メディアブロックによるCLSはありません。遅延ロードが有効になっています。

18）デザインシステムのトークンとドキュメント

• 値'container'、 'columns'、' gutter'、'space'、ベースライン；
• レイアウトの例（カード/テーブル/フォーム/ダッシュボード）；
• 密度のプリセット（慰め/コンパクト）および部品への効果；
• CSSグリッド/フレックスおよびFigmaスタイル/レイアウトのコードスニペット。

概要

グリッドは、設計と開発の間の契約です。ブレークポイント、コンテナ、スピーカー、8 ptリズム、デザイントークン、レイアウトテンプレートをキャプチャし、密度オプション、適応性、可用性を提供します。その後、ページのスケールは予測可能で、コンポーネントは再利用され、コマンドはより速く、より安定しています。