CSS で垂直方向に整列したグリッドを作成するにはどうすればよいですか?

CSS グリッド レイアウトを使用して垂直方向に整列したグリッドを作成する

CSS グリッド レイアウトを使用する場合、次のような状況が発生する可能性があります。デフォルトの水平方向の流れではなく、垂直方向に流れるグリッドを作成したいと考えています。 CSS Flexbox にはフローの方向をオーバーライドするための flex-direction プロパティが用意されていますが、CSS Grid Layout には現在、目的のフローを明示的に指定する同様の属性がありません。

CSS Grid Layout では、grid-auto-flow プロパティが役割を果たします。グリッドのアイテム配置の方向を決定します。 row (デフォルト値) に設定すると、項目は水平方向に流れ、必要に応じて新しい行が作成されます。逆に、grid-auto-flow を column に設定すると、項目が垂直方向に流れ、必要に応じて新しい列が作成されます。

ただし、この望ましい動作は CSS グリッド レイアウトだけでは実現できません。行を定義せずに、指定した数の列を垂直方向に埋めるグリッドを作成するには、CSS 複数列レイアウトを検討するのが適切です。 CSS グリッド レイアウトとは異なり、CSS 複数列レイアウトでは、自動列フローを使用して複数列レイアウトを作成でき、新しい列が必要になるまでグリッド項目が垂直に埋められるようになります。

CSS 複数列レイアウト例:

CSS 複数列レイアウトを利用すると、行を定義せずに、指定された列数で目的の垂直方向に整列したグリッド レイアウトを実現でき、この特定のシナリオにおける CSS グリッド レイアウトの制限を克服できます。

以上がCSS で垂直方向に整列したグリッドを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。