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

CSS グリッドの最終行で中央揃えを実現する方法

CSS グリッドを使用して要素をレイアウトする場合、これを実現するのは困難になりますグリッド トラックの性質上、最後の行は中央揃えになります。ただし、フレックスボックスは、このような配置要件に対してより適切なソリューションを提供します。

項目の最後の行を水平方向に中央に配置するには、コンテナ要素にフレックスボックスのプロパティを適用します。

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

フレックス-wrap: Wrap プロパティを使用すると、必要に応じて項目を複数の行に流し込むことができます。一方、justify-content: center では、すべての項目が全体に対して水平方向にパックされます。 row.

次に、個々のアイテムの flex 動作を設定します。

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

ここで、flex: 0 0 calc(16.66% - 20px) はアイテムの寸法を指定し、すべてのアイテムが同じ大きさ。正確な計算のために、box-sizing: border-box を含める必要があります。

その結果、項目は行全体に均等に分散され、justify-content: center プロパティにより最後の行が中央に配置されます。このアプローチは、CSS グリッドの制限を排除し、任意の数の要素の最後の行項目を中央に配置するための柔軟なソリューションを提供します。

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