CSS gridレイアウトのgrid-template-columnsプロパティで、repeat()関数にauto-fillとauto-fitを指定した時の動作の違いがよくわからなかったので、調べたメモです。
たとえば下記のCSSの場合、AとBでブラウザに表示される列グリッドの見た目にどんな違いが生じるでしょうか？
css
.container{display:grid;/* A */grid-template-columns:repeat(auto-fill,minmax(200px,1fr));/* B */grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}MDNの説明によると、auto-fitについては
auto-fill と同様に動作しますが、グリッドアイテムを配置した後、空の繰り返しトラックが折りたたまれる点が異なります。空のトラックとは、フロー内のグリッドアイテムが配置されていない、またはそれをまたいで配置されているものがないトラックのことです。（以下略）
言葉だけだとわかりにくいので、実際２つのgridコンテナにそれぞれauto-fillとauto-fitを指定したものを並べてトラック幅を変化させてみたら違いを理解でました。この動画です。
See the Pen [CSS grid demo] Differences between auto-fill and auto-fit in repeat() function by Kazuhiro Hashimoto (@kaz_hashimoto) on CodePen.
動画で使用したサンプルのHTML/CSSコード：
https://codepen.io/kaz_hashimoto/pen/MWbGewB