CSS グリッドを固定数の列で垂直に埋めるにはどうすればよいですか?

グリッド コンテナで行ではなく列を埋めるようにする

質問:

埋め込む CSS グリッドを作成するにはどうすればよいですか?水平ではなく垂直に配置することで、固定数を維持しながら任意の数の行を許可します。 columns?

答え:

CSS グリッド レイアウトはこの特定のレイアウトをネイティブに処理できませんが、CSS 複数列レイアウトは解決策を提供します。

CSS 複数列レイアウト:

#container {
  column-count: 3;
}

このコードは、必要に応じて新しい列を自動的に作成する 3 つの列を持つコンテナを定義し、垂直方向のフロー要件を満たします。

CSS グリッド レイアウト制限事項:

CSS グリッド レイアウトでは、grid-auto-flow とGrid-template-columns には逆の関係があります:

• grid-auto-flow: row (デフォルト) と Grid-template-columns が定義されている場合、項目は水平方向に流れ、新しい行が自動的に作成されます。
• ただし、これらのプロパティ (grid-auto-flow: 列と Grid-template-rows が定義されている) を逆にすると、無効な結果になります。

したがって、CSS グリッド レイアウトだけを使用して、固定数の列で垂直方向に塗りつぶされるグリッドを実現することはできません。

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