オーバーフローしたグリッド項目を行または列の中央に配置するにはどうすればよいですか?

行/列全体にわたるグリッド項目の整列: フレックスボックスの制限を超えて

あふれたフレックス項目を中央に整列するには、 justify-content プロパティと flex-wrap 設定。ただし、グリッド レイアウトの特有の性質により、オーバーフローしたグリッド アイテムで同様の動作を実現するには、別のアプローチが必要です。

フレックス ラインで動作するフレックスボックスとは異なり、グリッド レイアウトは交差するトラックを利用します。その結果、アイテムはこれらのトラックによって作成された特定のセクションに限定されます。その結果、justify-content や justify-self などのキーワード配置プロパティを使用して、グリッド アイテムを水平方向または垂直方向に自動的に中央揃えにすることはできません。

行全体にわたってグリッド アイテムを配置するには、1 つのオプションとして、アイテムの領域を行全体にまたがる必要があります。行/列全体、基本的に交差するトラックを排除します。これにより、justify-content: center または align-self: center を使用した中央揃え (水平方向と垂直方向の両方) が可能になります。

また、動的レイアウトでは、コンテナーを 1 つの列で設計し、1 つの大きな行を作成することもできます。アイテム。ラインベースの配置または明示的な配置テクニックを使用すると、アイテムをこの行内で中央に配置できます。

ただし、オーバーフローしたアイテムを中央に配置するには、フレックスボックスがより簡単なソリューションであることに注意することが重要です。フレックスボックスとグリッド レイアウトの違いにより、この特定の要件にはフレックスボックス アプローチが推奨されることが決まります。

以上がオーバーフローしたグリッド項目を行または列の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。