grid-auto-flowプロパティは、グリッドアイテムの自動配置のされ方を指定する際に使用します。
grid-auto-flowプロパティの値には、row・column・denseが用意されています。
グリッドレイアウトに対してグリッドアイテムが多いケースなどでは、はみ出したグリッドアイテムは自動配置されます。
この際、grid-auto-flow: row; なら必要に応じて新しい行が追加されます。
grid-auto-flow: column; なら必要に応じて新しい列が追加されます。
もう一つのキーワード dense は、row や column に追記して使用します。
denseは直訳すると「密集・高密度」という意味ですが、追記すると空白グリッドを埋めてパッキングをするようにグリッドアイテムが自動配置されます。
グリッドアイテムのサイズの大小をもとにパッキングの順番が決められるため、アイテムが順不同で表示されることがあるかもしれません。
div.sample {
display: grid;
grid-template-rows: 80px 100px 40px;
grid-template-columns: 50px 100px 40px;
}
div.sample div {
margin:4px; border-radius:4px;
background-color:#66cc99;
}
<h4>grid-auto-flow: row; を指定</h4> <div class="sample" style="grid-auto-flow: row;"> <div>一</div> <div>ニ</div> <div>三</div> <div>四</div> <div>五</div> <div>六</div> <div>七</div> <div>八</div> <div>九</div> <div>十</div> </div> <h4>grid-auto-flow: column; を指定</h4> <div class="sample" style="grid-auto-flow: column;"> <div>一</div> <div>ニ</div> <div>三</div> <div>四</div> <div>五</div> <div>六</div> <div>七</div> <div>八</div> <div>九</div> <div>十</div> </div>