【CSS Modules】grid-auto-flowプロパティの使い方

grid-auto-flowプロパティは、CSS Gridレイアウトにおいて、明示的に配置が指定されていないグリッドアイテムが、グリッドコンテナ内でどのように自動的に配置されるかを制御するプロパティです。CSS Gridは、ウェブページのコンテンツを柔軟に配置するための強力なレイアウトシステムであり、このプロパティは特に、個々のアイテムの配置を細かく指示しない場合に、それらをどのように整理するかを決定します。このプロパティは、display: gridまたはdisplay: inline-gridが適用されたグリッドコンテナ要素に指定されます。

主な値としては、「row」と「column」があり、それぞれアイテムを配置する方向を指示します。「row」が指定された場合（これがデフォルトの挙動です）、グリッドアイテムは左から右へ、上から下へと行方向に順番に配置されます。現在の行が埋まると、次のアイテムは新しい行に送られます。「column」が指定された場合、アイテムは上から下へ、左から右へと列方向に順番に配置され、現在の列が埋まると、次のアイテムは新しい列に送られます。

さらに「dense」キーワードを「row」や「column」と組み合わせて指定することも可能です。例えば、「row dense」や「column dense」のように使用します。「dense」は、グリッド内に空いたスペースがある場合、後続のアイテムをその空いたスペースに詰めて配置しようとします。これにより、グリッド全体の隙間を減らし、よりコンパクトなレイアウトを実現できますが、視覚的なアイテムの表示順序が、元のHTMLドキュメントでの記述順序と異なる場合がある点に注意が必要です。このプロパティを使用することで、複雑なグリッドの配置指示を記述することなく、効率的かつ柔軟にアイテムをレイアウトすることが可能になります。

Copy
1grid-auto-flow: row;

引数なし

引数はありません

戻り値なし

戻り値はありません