文章标签

网络上有很多这样的网格

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

我的意思是它们真正应该是什么

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(10px, 1fr));
}

除了使用媒体查询和现代 CSS 布局（如 flexbox 和 grid）来创建响应式网站之外，我们还可以做一些被忽视的事情来完善响应式网站。在这篇文章中，我们将深入探讨一些工具（围绕…）

现在一切都是灵活的。如果你写 grid-template-columns: 200px 200px 200px;，当然，你会得到等宽列，但这很少见。你通常的意思是 *三列等宽的流体宽度*。

我们有 分数单位 用于…

迄今为止，CSS Grid 最著名的代码行是

grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));

无需任何媒体查询，这将设置一个具有灵活列数的网格容器。这些列…

Ire Aderinokun 的另一篇精彩文章，这次是关于奇怪的 minmax() CSS 函数及其与我们最近一直在试验的 CSS Grid 功能如何协同工作。

这里特别棒的是 Ire 解释了如何… 的示例