CSS网格行属性在Chrome浏览器中无法正常运行

Question

我目前正在针对Udemy进行前端开发课程。在观看这些视频时，使用CSS网格布局时遇到了一个奇怪的问题。

正如您在图片中看到的那样，根据浏览器窗口的宽度，布局的结果有所不同。我不确定为什么会这样。

Small Browser Wdith

Full Browser Width

我希望较小的窗口（第一个图像）中的布局看起来与较大的窗口中的布局相似。有人知道为什么宽度不同时会发生这种变化吗？

相关的CSS代码如下。绿色类选择具有绿色背景的所有元素，并设置它们应跨越的列数和行数。

.container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-rows: 1fr;
}

.green {
    grid-column: span 2;
    grid-row: 1/3;
}