如果窗口变小，使div跳到另一行（使用CSS网格）

因此，我最近发现CSS网格正变得越来越成熟，也就是说，现在大多数浏览器都支持它——这对我当前的项目来说很好。我不需要IE7之类的工具，就能以最好的方式查看此网页。我知道当屏幕变小的时候，你可以通过媒体查询做一些聪明的事情

但我想知道，例如，单独使用CSS网格是否可以做到这一点

让我们假设我有这样的事情：

.container{
显示：网格；
最大宽度：1200px；
网格模板柱：1fr 1fr 1fr；
栅柱间隙：25px；
}
.项目-1，
项目-2，
第3项{}

一些内容
一些内容
一些内容

如果最小化窗口时，

.container

div中的div小于某个值（如200px），则移动最外面的右div（

.item-3

）位于

item-1

下方，并遵循与

item-1

相同的宽度路径，且不会拉伸到与

item-1

和

item-2

一样宽

当项目宽度小于200px时，浏览器如何知道要重新排列布局

当媒体功能被触发时，浏览器如何知道该做什么

---

因此，是的，您需要媒体查询。这正是它们的用途。

是的，您必须为此进行媒体查询。像bootstrap这样的框架内置了这些媒体查询，因此看起来是自动的。