当网格列的大小不均匀时，CSS网格是否允许行堆叠？

Question

我想使用CSS Grid创建一组大小不均的内容列，对于较小的视口，这些列垂直堆叠而不是水平堆叠。

我的出发点是this codepen，它具有三个相同大小的重复列，当您更改视口的大小时（例如，使浏览器窗口变小），它们会堆叠在一起。那支笔开始看起来像这样：

当我将可用屏幕空间减半时，它会缩小为：

此自动断开行为是通过CSS中的以下网格定义实现的：

.wrapper-wrapper {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1024px) 1fr;
}
.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
    grid-column: 2/-2;
}

我修改了此代码，以在this codepen中使用大小不一的列：

.layout {
    display: grid;
    grid-template-columns: 1fr minmax(0px, 1024px) 1fr;
}
.content {
    grid-column: 2 / -2;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 3fr) minmax(200px, 4fr) minmax(200px, 3fr));
    grid-gap: 10px;
}

但是，当我调整浏览器窗口的大小时，该示例执行以下操作，而不是像第一个示例那样将其堆积在行中：

但我希望发生以下情况：

第一个示例和第二个示例之间的唯一区别是，在第二个示例中，使用了大小不均的网格列布局。如果我修改以下行：

grid-template-columns: repeat(auto-fill, minmax(200px, 3fr) minmax(200px, 4fr) minmax(200px, 3fr));

并替换为：

grid-template-columns: repeat(auto-fill, minmax(200px, 3fr));

与第一个示例一样，它开始再次执行我想要的操作。

在不均匀列的情况下，我该怎么做才能保持这种行为？  问题代码：

.layout {
    display: grid;
    grid-template-columns: 1fr minmax(0px, 1024px) 1fr;
}
.content {
    grid-column: 2 / -2;
    display: grid;
    grid-template-columns: repeat(auto-fill, 
                                  minmax(200px, 3fr) 
                                  minmax(200px, 4fr) 
                                  minmax(200px, 3fr));
    grid-gap: 10px;
}
.content-section {
    background: lightblue;
}
.item-image {
  width: 100%;
}

<div class="layout">
    <div class="content">
        <div class="content-section sidebar left-sidebar">
            <div class="left-news-item">
                <img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" class="item-image">
            </div>
        </div>
        <div class="content-section content-main">
            <div class="center-news-item">
                <img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" class="item-image">
            </div>
        </div>
        <div class="content-section sidebar right-sidebar">
            <div class="left-news-item">
                <img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" class="item-image">
            </div>
        </div>
    </div>
</div>