CSS で垂直方向に流れるグリッド レイアウトを作成するにはどうすればよいですか?

垂直に流れるグリッド コンテナ

CSS グリッド レイアウトでは、水平ではなく垂直に流れるようにグリッド コンテナを定義することは直接不可能です。 CSS Flexbox には flex-direction 属性があるため、列数と行数のどちらを指定する必要があるかという問題が生じます。

CSS グリッド レイアウトの制限

CSS の問題グリッド レイアウトは、grid-auto-flow プロパティと Grid-template-rows/columns プロパティ間の逆の関係です。 Grid-auto-flow: row が Grid-template-columns とともに設定されている場合、グリッド項目は水平方向に流れる行を自動的に作成します。

複数列レイアウトの代替

本当に垂直に流れるグリッドの場合は、CSS の複数列レイアウトを考慮する必要があります。このモジュールでは、行を定義せずに、必要に応じて新しい列を作成できます:

#container {
  column-count: 3;
}

例:

<div>

このコードは、垂直方向に流れるグリッドを作成します。 3 つの列があります。

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