auto-fill
repeat()
の第1引数に指定する
Grid Container
に余白が生じる場合、
Grid Track
を増やしていく
余白に
Grid Item
が入るだけのサイズがあると、そこに
Grid Track
を追加する
auto-fillとauto-fitは一行の時でminmaxを使っている時のみ違いが出る
ことに注意
挙動としては、
minmax
の間でできるだけ小さくなろうとするイメージ
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
と指定した場合
https://gyazo.com/c76f38b4216fae674cd7288115137263 https://codepen.io/mrsekut/pen/BaPEMvB