auto-fitとauto-fillの違い
auto-fillとauto-fitは一行の時でminmaxを使っている時のみ違いが出ることに注意する
折り返して2行以上になっているときは全く同じ挙動になる
minmaxを使わずに、repeat(auto-fill, 150px)のような固定値を指定した場合も全く同じ挙動になる
これらの説明に「余白が生じる場合」という条件文が添えられるのはそういう理由
https://gyazo.com/2cef97a04b53daba55ad05ee7a88866f https://gyazo.com/2cef97a04b53daba55ad05ee7a88866f
上が、auto-fit
下が、auto-fill
2行以上になっているときは違いがない
上記コードはrepeat(???, minmax(150px, 1fr))という指定をしているが、
仮にrepeat(???, 150px)と指定した場合は違いが出ない
1行で、余白が生じる時に違いがあることがわかる
auto-fitの場合は、隙間を全て埋めようとして、itemができるだけ大きくなる
Grid Trackの数は変わらない
auto-fillの場合は、隙間を保ち、itemができるだけ小さくなる
Grid Trackの数が増えている