CSS グリッドは Flexbox の「justify-content」のように全行/列の配置を実現できますか?

行/列全体にわたるグリッド項目の配置

質問: CSS グリッドを使用して、オーバーフローしたグリッド項目に対して同じ動作を実現することは可能ですか? justify-content を使用するフレックス項目と同様property?

答え:

フレックス レイアウトとグリッド レイアウトにはいくつかの類似点がありますが、配置機能に根本的な違いがあります。

フレックスレイアウト:

フレックス レイアウトはフレックス ラインを利用します。交差しない行または列。フレックス項目を中央に配置すると、フレックス ライン全体に沿ったスペースにアクセスできるため、位置合わせが簡単になります。

グリッド レイアウト:

グリッド レイアウトではトラックが使用されます。交差する行と列。これは、グリッド項目がトラックによって定義された特定のセクションに限定されることを意味します。したがって、justify-content や justify-self などのキーワード配置プロパティを使用して、グリッド アイテムを自動的に中央揃えにすることはできません。

水平方向の中央揃え:

グリッド アイテムを水平方向に中央揃えにするには、次のようにします。行全体にわたるグリッド領域を作成します。これにより、justify-content: center を使用してアイテムを中央に配置する方法がクリアされます。

垂直方向の中央揃え:

垂直方向の中央揃えには、行ベースの配置を使用できます。これには、行全体を囲むように項目の Grid-row-start プロパティと Grid-row-end プロパティを設定することが含まれます。

代替アプローチ:

動的が必要な場合配置を調整し、明示的なグリッド領域の操作を避けたい場合は、グリッド レイアウトの代わりにフレックスボックスを使用することをお勧めします。フレックスボックスを使用すると、行または列全体にわたって項目をより柔軟に配置できます。

以上がCSS グリッドは Flexbox の「justify-content」のように全行/列の配置を実現できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。