grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(4, 100px);
grid-auto-flow:column ;

box2 と box3 はそれぞれ

grid-column: span 2 ;
grid-row: span 2;

動画と同じこの状況のとき、box3 はグリッド外にはみ出るので横幅にいっぱいになるから
grid-auto-columns を使用して整えるとのことでしたが、grid-auto-columns を使わずに

grid-template-columns: repeat(3, 100px);

を

grid-template-columns: repeat(auto-fill, 100px);

とするのではだめなのでしょうか？

見た目的には box3 の横幅が 100px となり、grid-auto-columns を使用したときと同じように表示されました。
教えていただけると幸いです。