グリッドセルの境界を視覚化して、各セル内で子要素がどのように配置されるかを明確に確認できます
4つの配置プロパティを調整して、異なるレベルの配置効果を観察します
セル内の垂直配置
セル内の水平配置
グリッド全体の垂直配置
グリッド全体の水平配置
align-items: center | justify-items: center | align-content: center | justify-content: centerコンテンツ配置効果を実演するための追加コンテナスペースを持つ3x3グリッド
start - 子要素をセルの上部に配置center - 子要素を垂直方向に中央配置end - 子要素をセルの下部に配置stretch - 子要素をセルの高さに合わせて伸縮start - 子要素をセルの左側に配置center - 子要素を水平方向に中央配置end - 子要素をセルの右側に配置stretch - 子要素をセルの幅に合わせて伸縮start - グリッドをコンテナの上部に配置center - グリッドを垂直方向に中央配置end - グリッドをコンテナの下部に配置space-* - グリッド行間にスペースを分散start - グリッドをコンテナの左側に配置center - グリッドを水平方向に中央配置end - グリッドをコンテナの右側に配置space-* - グリッド列間にスペースを分散