无需媒体查询的响应式网格布局
阅读评论
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 可以自动化许多乏味的布局样式工作。