让CSS网格区域在移动设备上堆叠（单列布局）

当在小屏幕上观看时，我试图让CSS网格块堆叠在彼此之上。我知道我可以编写媒体查询，将两列更改为一列。但我认为Grid可以在没有他们的情况下处理这件事

我想我可以通过自动调整列来实现这一点。然而，我想我可能误解了这是怎么回事

.grid容器{
显示：网格；
网格模板列：重复（自动拟合，最小值（400px，1fr））；
网格模板行：1fr 1fr；
网格模板区域：“leftCol rightTop”“leftCol rightBottom”；
高度：100vh；
}
leftCol先生{
网格区域：leftCol；
背景颜色：粉红色；
宽度：100%；
身高：100；
}
.右下角{
网格区域：右下角；
背景颜色：黄色；
宽度：100%；
身高：100；
}
.右上角{
网格区域：右上角；
背景颜色：蓝色；
宽度：100%；
身高：100；
}

尝试使用

css:

当在小屏幕上观看时，我试图让CSS网格块堆叠在彼此之上。我知道我可以编写媒体查询，将两列更改为一列。但我认为Grid可以在没有他们的情况下处理这件事？我想我可以通过列上的

auto-fit

来实现这一点

你可以。

给你：

.grid容器{
显示：网格；
网格模板列：重复（自动拟合，最小值（400px，1fr））；
网格自动行：50%；
高度：100vh；
}
.leftCol{背景色：粉红色；}
.rightBottom{背景色：黄色；}
.rightTop{背景色：蓝色；}
正文{margin:0；}

为什么您不想要媒体查询提供给您的控制？我会问，为什么不需要时就编写它们？另外，可能使用flexbox而不是grid我在flexbox中做了这项工作，但我试图了解如何在CSS grid中实现这一点，尝试在没有

网格模板区域

或任何

网格区域

定义的情况下查看网格行为-您将看到网格项随着窗口大小的减小而堆叠。。。

.grid-container div {
    display: inline-block;
    float: left;
}