CSS グリッド レイアウトの最後の行の要素を中央に配置するにはどうすればよいですか?

CSS グリッドの最後の行要素を中央揃えにする

CSS グリッドは、Web ページ上のコンテンツを整理するための強力なレイアウト システムです。ただし、項目の数が不明な場合、要素をグリッドの最後の行の中央に配置するのは困難な場合があります。

行全体の配置に関する CSS グリッドの制限

CSS グリッドは、交差するトラックが道を妨げるため、行全体に配置するように設計されていません。これは、justify-content や align-self などのメソッドを使用しても、項目を最後の行に整列させるのに効果的ではないことを意味します。

代替アプローチ: Flexbox

適切な代替手段要素を最後の行の中央に配置するには、フレックスボックスを使用します。フレックスボックスを使用すると、コンテナ内で項目を柔軟に配置および配置できます。

フレックスボックスを使用して項目を最後の行の中央に配置するには、次の手順に従います。

1. コンテナの表示プロパティを次のように変更します。 flex.
2. 項目を複数行に折り返せるようにするには、flex-wrap プロパティを Wrap に設定します。
3. Apply justify-content: コンテナを中心にして、すべての項目を水平方向に中央揃えにします。
4. 個々の項目に余白を追加して間隔を作り、それらを離します。

コード例

フレックスボックスを示すコード スニペットの例を次に示します。アプローチ:

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

* {
  box-sizing: border-box;
}

結論

CSS グリッドは多用途のレイアウト システムですが、行全体で要素を整列させるには必ずしも最適な選択であるとは限りません。 Flexbox は、この特定の要件を処理するためのより柔軟なソリューションを提供します。 justify-content を適用し、余白を管理することで、アイテムをグリッドベースのレイアウトの最後の行の中央に効果的に配置できます。

以上がCSS グリッド レイアウトの最後の行の要素を中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。