Grid（グリッド）は、コンテンツを行と列に分割してレイアウトするためのコンポーネントです。Row（行）と Column（列）、そして Column 間の Gap によって、一貫したリズムのレイアウトを組み立てられます。

1. 概要 (Overview)

説明

Grid は、Row（行）の中に Column（列）を並べることで、コンテンツを格子状にレイアウトします。Column の分割数を組み合わせることで、柔軟なレイアウトを構成できます。

リンク

• Storybook
• GitHub

2. 構成要素 (Anatomy)

ARow

グリッドレイアウトの行にあたる要素で、Column の集合が Row です。垂直方向にスタッキングします。

必須/任意: 必須

BColumn

グリッドレイアウトの列にあたる要素で、水平方向に並びます。デフォルトの Column の幅は、Row の幅から Gap を引いた残りを 12 分割したサイズです。

ソースコード上では、 col と省略して表記します。複数形は cols です。

必須/任意: 必須

CGap

Column と Column の間隔です。Row の両端には Gap はありません。

必須/任意: 任意

3. 使い分け (Usage)

いつ使うか

• コンテンツを行と列の格子状にレイアウトしたいとき
• 画面幅に応じて列数や列幅を変えたいとき

いつ使わないか

• 最大幅と左右マージンを制御したいだけの場合は Container を使用する
• リストや表など、意味を持つ構造には Grid ではなく対応するコンポーネント（List、Table など）を使用する

類似コンポーネントとの違い

• Container: コンテンツの最大幅と左右マージンを制御する。Grid を Container の中に置いて併用することが多い。

4. バリエーション (Variants)

Column のサイズ調整

Column は 12 分割を基準に、1 つの Column が占める分割数を指定できます。複数の分割数を組み合わせることで、さまざまな比率のレイアウトを構成できます。

5. アクセシビリティ (Accessibility)

このコンポーネント固有のチェック項目です。コントラスト・フォーカス可視化など全コンポーネント共通の原則はアクセシビリティガイドラインを参照してください。

• Grid はレイアウトのための仕組みであり、視覚的な並びと DOM の読み上げ順が食い違わないようにする
• 列の並べ替えを視覚的に行う場合も、内容の論理的な順序が崩れないようにマークアップする