CSS グリッド コンテナーで行ではなく列を埋める方法

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

CSS グリッド レイアウトでは、grid-auto-flow プロパティによって項目が行に配置されるか列に配置されるかが決まります。デフォルト設定である「行」に設定すると、項目は水平に配置され、必要に応じて新しい行が作成されます。通常、この動作は、目的のレイアウトが垂直である場合には理想的ではありません。

grid-auto-flow が row に設定されている場合、grid-template-columns はグリッド内の列の数を定義します。ただし、このシナリオでは、項目は依然として水平方向に流れ、列ではなく行を埋めます。

行を定義せずに、必要に応じて新しい列を作成する垂直方向に流れるグリッドの場合は、CSS 複数列の使用を検討してください。代わりにレイアウト。これにより、アイテムを垂直方向に積み重ねることができ、必要に応じて新しい列を自動的に作成できます。

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
}

このコード スニペットはその概念を示しています。 Grid-template-columns プロパティで 3 つの列が定義されているにもかかわらず、項目は水平方向に流れ、必要に応じて新しい行が作成されます。この特定のレイアウトに CSS グリッド レイアウトを使用することは推奨されないことに注意してください。

以上がCSS グリッド コンテナーで行ではなく列を埋める方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。