グリッド（CSSグリッドとも呼ばれる）は、レイアウトを構造化するための表示プロパティです。グリッドは、グリッドコンテンツの再配置やサイズ変更を行い、強力でレスポンシブなデザインを生成する柔軟性を提供します。グリッドは表示設定であるため、ガイドです。
このレッスンでは、以下のことを学びます：
グリッドの作成と編集方法
グリッドを作成するには、キャンバスにAdd panelからグリッドをサポートする要素（例：セクション、divブロックなど）を追加します。その後、その要素を選択し、tyle panel > Layout > Display に移動し、Grid. を選択します。
グリッドの編集方法
グリッドを編集するには、グリッドを含む要素を選択します。次に、panel > Layout > Display に移動し、Edit gridをクリックします。グリッド編集モードを終了するには、Esc キーを押すか、キャンバス上でDoneをクリックします。
行(rows)と列(columns)の追加方法
グリッド編集モードでは、右上または左下のグリッドヘッダーの隣にある「プラス」アイコンをクリックして新しい行や列を追加できます。また、スタイルパネル に移動し、Columnsまたは Rows の隣にある「プラス」アイコンをクリックして新しい行や列を追加することもできます。
行と列の複製と削除方法
列や行を複製または削除するには、キャンバス上の列や行ヘッダーを右クリックし、Duplicate(複製) または Delete(削除) を選択します。また、列や行にカーソルを合わせると、スタイルパネル でも行や列を削除または複製できます
行と列の順序の調整方法
行や列の順序は、スタイルパネル で調整できます。移動したい行や列の上にカーソルを合わせ、左側に表示されるハンドルをドラッグします。
列と行のサイズ調整方法
列のサイズは、列見出しを選択してキャンバス上で目的のサイズにドラッグすることで調整できます。また、スタイルパネル で列や行のカスタムサイズを入力するか、キャンバス上の行や列見出しをクリックしてカスタムサイズを設定できます。
グリッドのサイズ設定
グリッドのサイズ設定には通常の単位（例：px、em、rem）を使用するか、FR単位 を使用できます。FR単位は、グリッド内の利用可能なスペースの一部を表します。これを使用して、パーセンテージやピクセル単位と同様に行と列の長さを定義します。しかし、固定されたパーセンテージやピクセル単位とは異なり、FR単位はギャップを調整しながら自動的に行と列のスペースを計算します。
グリッドのサイズ設定
グリッドのサイズ設定には通常の単位（例：px、em、rem）を使用するか、FR単位 を使用できます。FR単位は、グリッド内の利用可能なスペースの一部を表します。これを使用して、パーセンテージやピクセル単位と同様に行と列の長さを定義します。しかし、固定されたパーセンテージやピクセル単位とは異なり、FR単位はギャップを調整しながら自動的に行と列のスペースを計算します。
また、最小値/最大値 の値を設定して、行と列が設定された最小値を下回らず、設定された最大値を超えないようにすることもできます。たとえば、行の最小の高さを200pxにしたい場合、最小値を200pxに設定し、最大値をAutoに設定できます。その後、行は内部のコンテンツに基づいて成長し、200px未満には縮小されないようになります。
グリッド内のコンテンツ配置方法
グリッド内には、任意の子要素（例：見出し、画像、divブロックなど）を追加できます。デフォルトでは、新しいグリッドの子要素は個々のグリッドセルを占有し、左から右へ次の利用可能なセルを埋めます。行内に利用可能なセルがもうない場合、新しい行が生成されて新しいグリッドの子要素が配置されます。
グリッドコンテンツの流れる方向を変更する方法
グリッド編集モードで、グリッドの子要素の流れる方向を変更するには、Style panel > Direction に移動します。ここで、行 を選択すると、子要素が左から右に配置され、列 を選択すると、子要素が上から下に配置されます。
グリッド内のコンテンツを手動で配置する方法
グリッド内のコンテンツを手動で配置するには、要素をグリッドにドラッグする際に Shift キーを押し続けます。グリッド内で手動で配置されたアイテムは、その手動配置設定が保持されます。また、既存のグリッドの子要素の位置設定を手動に変更することもできます。これを行うには、グリッドの子要素を選択し、Style panel > Grid child > Position に移動し、Manualに設定します。
手動で配置されたグリッド子は指定されたグリッドセルに留まるが、自動で配置されたグリッド子は新しいグリッド子を収容するために次のセルに移動する。
複数の要素をグリッドセル内にネストする方法
複数の要素を単一のグリッドセルに追加するには、要素をグリッドの子要素として入れ子にします。これを行うには、まずグリッドの直接の子要素として構造要素（たとえば、divブロック）を追加します。その後、追加した構造要素をグリッドの子要素として使用して、他の要素をそのdivブロックに追加することができます。要素をグリッドセルにドラッグする際に、要素を追加するためにControlキーを押しながらドラッグします。
グリッド内のコンテンツを複製する方法
同じコンテンツを複数のグリッドセルで再利用するために、グリッドの子要素を複製する方法は2つあります：
- Optionキー（Mac）またはAltキー（Windows）を押しながらコンテンツをドラッグして複製し、新しいグリッドセルに移動します
- コンテンツを選択してコピーし、その後グリッドを選択し、コンテンツを貼り付けます
コンテンツをグリッド内で移動し、span(スパン)、aligment(アラインメント)を調整する方法
コンテンツをグリッドに配置した後、コンテンツのデザインをカスタマイズできます。コンテンツを異なるセルに移動して再配置したり、複数のセルをまたいでコンテンツをスパンさせたり、さらにはグリッド内でコンテンツのアラインメントを調整したりすることができます。
グリッド子要素の移動
グリッド内のコンテンツを再配置するには、グリッドの子要素を選択してキャンバスまたはNavigator内で目的の位置にドラッグします。
グリッド子要素の順序の設定
グリッドの子要素の順序も設定できます。グリッド子要素を選択し、Style panel > Grid child > Orderに移動します。
グリッド内のコンテンツのアラインメント
すべてのグリッド子要素のアラインメントを更新するには、グリッドを選択し、Style panel > Layout > Alignに移動します。
個々のグリッド子要素のアラインメントを変更するには、グリッド子要素を選択し、Style panel > Grid child > Alignに移動します。
グリッド子要素のスパン
複数のグリッドセルにわたってグリッド子要素をスパンさせるには、グリッド子要素を選択し、グリッドセルの角に表示されるハンドルをドラッグします。
また、スタイルパネル内でもグリッド子要素をスパンさせることができます。自動配置されたグリッド子要素をスパンさせるには、グリッド子要素を選択し、Style panel > Grid child > Positionに移動し、グリッド子要素がスパンする列および行の数を指定します。
手動で配置されたグリッド子要素をスパンさせるには、グリッド子要素を選択し、Style panel > Grid child > Positionに移動し、グリッド子要素が開始および終了する列と行を入力します。
レスポンシブなグリッド内でコンテンツをスパンさせる方法の詳細をご覧ください。
グリッド子要素の位置固定
負の数値を使用することで、グリッド内での相対的な位置を設定できます。これにより、セルの右から左へまたは下から上への順序でセルを参照します。
負のグリッド子要素の位置設定値は、次の場合に便利です。
- 新しい列を追加するたびにナビゲーションバーを全列に再スパンしたくない場合 — ナビゲーションバーを1列（最初の列）と-1列（最後の列）の間に配置します。
- グリッドに新しい行を追加する度に、フッターを常に最後の行に保ちたい場合 — フッターを行-1/-1に配置します。
- メインコンテンツセクションを常
グリッド子要素の設定をクリアする
グリッド子要素の設定は選択された要素にのみ適用され、クラスとして保存されません。スタイルパネル内のピンクのラベルは、選択された要素に適用された変更された設定を現在のブレークポイントで示しています。これらの設定は、下位のブレークポイントにも継承され、オレンジのラベルで表示されます。これらの設定は、より小さいブレークポイントで継承された（つまりオレンジの）設定を上書きすると、再びピンクに戻ります。
適用されたグリッド子要素の設定を削除するには、設定のピンクのラベルをクリックしてからリセットをクリックします。
グリッド子要素のオーバーラップ
手動で位置指定されたグリッド子要素は、同じセル内で重なる場合に自動的にオーバーラップします。これらの重なる要素のスタック順序は、Navigator内での再配置や位置調整やz-index設定を調整することによって制御できます。レスポンシブなグリッド内のコンテンツのオーバーラップについて詳しく学ぶ。
空のグリッドセルを埋める
グリッド子要素をスパンさせる場合、空のセルがグリッドに残る可能性があります。これらのセルを自動的にコンテンツで埋めるには、グリッドの編集モードに移動し、スタイルパネルでDenseをチェックします。
重要: Dense設定は、グリッド内の空のセルにグリッド子要素を適合させようとします。これはアクセシビリティに悪影響を及ぼす可能性があります。なぜなら、アイテムの表示位置だけを変更し、ページのソース内でどこに表示されるかを変更しないためです。
レスポンシブなグリッドのデザイン方法
画面サイズに対応するようにグリッドを設計するには、小さなブレークポイントで列を手動で削除するか、自動的に列と行を生成して画面サイズが小さいデバイスに適応させるために自動フィットを有効にすることができます。
ブレークポイントごとにグリッドレイアウトを手動でスタイル設定する
すべてのデバイスでグリッドがレスポンシブになるようにするには、必要に応じて小さなブレークポイントで列を削除します。
小さなブレークポイントで列を削除できない場合：
- グリッドのDirectionをRowに設定してみてください
- それらの列に手動で配置したグリッドの子要素がないことを確認してください
- それらの列にまたがる子要素がないことを確認してください
auto-fit（自動フィット）を有効にする
auto-fitはグリッドの中でも最も強力な機能の一つです。これにより、グリッドがすべての画面サイズにわたって動作し、ブレークポイントごとの調整は不要です。
自動フィットを有効にするには、グリッド内の列を1つだけ残し、行も1つ残します。その後、グリッド編集モードに移動し、列のヘッダーをクリックして、列の最小および最大寸法を設定し、Auto-fitをチェックします。これにより、コンテンツがグリッド内でレスポンシブに分布されるために、自動的に複数の列が生成されます。
コレクションリストをレスポンシブなグリッドに変換する方法の詳細はこちらをご覧ください。
