①親要素にプロパティ[grid-auto-flow]/値をcolumnに設定→
gridレイアウトを左上基準に縦方向に並べるため

②.box2＆.box3にgrid-column: span 2; grid-row: span 2;を設定→
子要素を縦方向と横方向に2マス分大きくするため

③div要素の.box3は設定したgrid領域を越えるため横方向に広がる

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
上記までは理解できたのですが、.box3を.box2と同じ大きさにするために.box3セレクタにgrid-auto-columns: 100px;を指定すると.box2と同じ大きさになる事が分かりません。

.box2は100pxが縦/横方向に2マス分、つまり200pxあるので.box3のgrid-auto-columnsプロパティの値も200pxに指定するべきなのかなと思ってしまうのですが、結果が違いました。

.box3のgrid-auto-columnsプロパティの値が200pxではなく100pxに指定する理由を教えてください。