グリッド レイアウトの "align-items" と "align-content" の違いを理解する

グリッド レイアウト モジュールでは、2 つのセットが導入されています。プロパティ「justify/align-items」と「justify/align-content」。これらは、グリッド コンテナー内でグリッド項目とグリッド自体を配置する際に異なる役割を果たします。

グリッド用語の説明

• Grid Container: グリッド空間全体を定義する親コンテナ。
• Grid: グリッドを分割する構造化された線のグリッド。グリッド コンテナをグリッド領域に配置します。
• グリッド アイテム: グリッド領域内のインフロー コンテンツを含むボックス。

項目の位置合わせとAlign-content

「align-items」プロパティと「align-content」プロパティは、その名前が示すように、それぞれグリッド項目とグリッドを整列させます。具体的には:

• justify-content および align-content は、グリッド コンテナーのコンテンツ ボックス内のグリッド トラックを整列します。
• justify-self および justify-items は、グリッド項目をインライン次元で整列させます (デフォルトでは水平方向)。
• align-self および align-items ブロックの寸法でグリッド項目を整列します (デフォルトでは垂直)。

著者の主張への対処

著者の主張は、「 「-content」プロパティが存在するのは、「グリッドの合計サイズがグリッド コンテナのサイズより小さい場合がある」ため、次のことが強調表示されます:

• グリッドがグリッド コンテナより小さい場合、利用可能な空きスペースがあります。
• 「justify-content」プロパティと「align-content」プロパティは、このスペースを利用してグリッドを中央に配置するか、コンテナ内のその他の方法で配置できます。
• 対照的に、グリッドがサイズはコンテナのサイズと等しく、空き領域はなく、これらの配置プロパティは効果がありません。

Clarity のイラスト

[W3C からのイラストの画像]コンテナより小さいグリッドを表示し、「justify-content」と「align-content」でコンテナ内のグリッドを整列させます。]

仕様からの抜粋

明確にするために、CSS グリッド レイアウト仕様からの関連する抜粋を示します。

• 「グリッド項目は、グリッド項目の justify-self プロパティまたは justify-items プロパティを使用してインライン ディメンションに配置できます。グリッド コンテナ。"
• "グリッド アイテムの align-self プロパティまたはグリッド コンテナの align-items プロパティを使用して、グリッド アイテムをブロック次元に揃えることもできます。"
• "グリッドの外側の端がグリッド コンテナーのコンテンツの端に対応しない場合、グリッド トラックは、グリッド コンテナーの justify-content プロパティと align-content プロパティに従ってコンテンツ ボックス内で位置合わせされます。"