CSS グリッドの行全体でグリッド項目を水平方向の中央に配置するにはどうすればよいですか?

グリッド項目を行全体で水平に配置する

背景

フレックス項目とは異なり、グリッド項目はCSS グリッドだけを使用して、行または列全体の水平方向の位置を簡単に揃えることはできません。フレックス レイアウトでは交差しないフレックス ラインが使用され、アイテムを簡単に中央に配置できますが、グリッド レイアウトでは交差するトラックが使用され、アイテムの移動が制限されます。

解決策

グリッド アイテムを整列するには行を水平に横切る:

• 1 列グリッドを作成するコンテナ: グリッド コンテナを 1 列に減らし、アイテムがトラック全体に広がるようにします。
• アイテムを中心に明示的に移動します: ラインベースの配置を使用します (例: 、align-self: center justify-self: center) を使用して、項目を明示的に中央に移動します。 row.

制限事項と考慮事項

• 1 列グリッドの使用は、すべてのレイアウトに適しているとは限りません。
• 明示的に項目を移動するには、より複雑な CSS コードが必要になる場合があります。
• 動的レイアウトの調整が必要ですが、項目を行または列にまたがって配置するには、依然としてフレックスボックスの方が優れたオプションです。

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