Andy Bell 制作了 一个非常酷的演示，它向我们展示了如何在不使用任何媒体查询的情况下创建响应式网格布局。当您更改浏览器窗口的大小，它会像这样显示
我认为这是一种很棒的布局技巧，仅使用 6 行 (!) CSS 代码。
.auto-grid {
--auto-grid-min-size: 16rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
grid-gap: 1rem;
}这告诉我们，我们不必编写大量的媒体查询来更改网格中的列数。Andy 也证明了 CSS Grid 可以自动完成很多布局样式的繁琐工作。
我已经看到这种技术在几个地方使用（并且我们有一些 网格模板），但是 Andy 关于 它是如何工作的 的文章终于让我理解了网格的实用性。
我们可以在 bootstrap 中避免使用媒体查询吗？
可以。只要不要使用 `container`、`row` 和 `column` 类即可。
但是，当容器宽度小于 `--auto-grid-min-size` 时，它不起作用……我实现了这种模式，但是我必须为此边缘情况使用媒体查询。
这对小型项目来说很棒。对于大型项目，您需要能够在网格缩减为更少的列时进行沟通。您不能告诉客户或设计师“当它不再适合时”。他们希望能够推断屏幕尺寸，即使不是设备类型。
为什么使用变量 “–auto-grid-min-size”？它只使用过一次，而且如果您用它的值替换它，它也能正常工作。我想他想要展示他可以使用变量，也许是为了区分那些不了解最新 CSS 的人？
在您的演示中，菜单也从多个按钮/链接更改为一个将它们全部组合在一起的按钮（汉堡菜单）。我认为这部分是由 CSS 网格完成的，我觉得这太棒了。但不幸的是，我想您指的是内容而不是页眉……
您是否对菜单使用了媒体查询？
为什么是 `auto-fill` 而不是 `auto-fit`？
在项目数量少于列数的情况下，`auto-fill` 会创建空列，而 `auto-fit` 只会创建所需的列数。
很棒的例子。此解决方案在 Safari、Firefox、Edge 和 Chrome 中都能正常工作吗？