親要素の幅が200pxまでは1カラムで表示されます。

200pxになると2カラムになり、それぞれのカラム幅は100pxから始まります。
親要素がさらに広がると、各カラムの幅も100pxより大きくなり、親要素の幅いっぱいまで自動的に広がります。

同じように、300px以上で3列、400px以上で4列表示になります。

600px以上になると、
auto-fitの場合は横幅いっぱいに各カラムが大きくなっていきます
auto-fillの場合は100pxのカラムが5列になり、横幅がスペースになっています。
横幅のスペースは空のカラムができています。デベロッパーツール等で確認してみてください。
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr);
親要素幅: 100px
カード1
カード2
カード3
カード4
カード5