CSS グリッドは、フレックスボックスのようにオーバーフローするアイテムを中央に配置できますか?

グリッドの調整: Flex のような行/列に沿った項目の配置

justify-content: center を使用して、あふれた項目を線に沿って中央に配置する Flexbox の機能貴重な機能です。 CSS グリッドは、オーバーフローしたアイテムに対して同じことを提供できますか?

課題

フレックスボックスの強みは、交差しない行や列である「フレックス ライン」の概念にあり、自由に並べられるアイテム。一方、グリッドは、レイアウトを分割する交差するトラックを使用します。これにより、項目が特定のセクションに制限されるため、キーワード配置プロパティを使用して項目を行または列全体で中央揃えにすることが困難になります。

グリッドの障壁を克服する

グリッド項目は中央揃えのみ可能です行全体にまたがる場合は、行全体に渡ります。これは、行全体を明示的にカバーするグリッド領域を定義することで実現できます。このような領域に配置されたグリッド項目は、justify-content: center を使用して水平方向に中央揃えするか、align-self: center を使用して垂直方向に中央揃えにすることができます。

動的レイアウト

動的レイアウトの場合、列の数が異なる場合がある場合、単一列のグリッドを作成するか、線ベースの配置を使用すると、アイテムを中央に配置することが容易になります。 rows.

代替手段としての Flexbox

グリッドの位置合わせが困難であることが判明した場合、Flexbox は引き続き実行可能なオプションです。 Flexbox のラインベースの性質により、項目をフレックス ライン内で自由に配置できるため、コンテナ全体で項目を中央に配置するのに最適です。

以上がCSS グリッドは、フレックスボックスのようにオーバーフローするアイテムを中央に配置できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。