CSS Grid 中等宽列有点奇怪

如今一切都很灵活。如果您编写 grid-template-columns: 200px 200px 200px;，当然，您将获得等宽列，但这很少见。您通常指的是三列等宽的流体列。

我们可以使用 分数单位 来实现，例如 grid-template-columns: 1fr 1fr fr;。这通常没问题，但它们不像像素那样稳定。大量媒体（或类似 <pre> 的内容，或像 URL 这样长的文本）会导致这些列拉伸，而这几乎不是您想要的。我将其称为 网格膨胀。主要思想是 1fr 列的最小宽度为 auto，而不是 0。换句话说，这些加宽的列只是尽可能窄！

为了解决这个问题，我们可以这样做

.el {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

…或者我们可以简写它

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

有点别扭，但可以接受。您只需要学习一次。如果您始终为媒体设置 max-width 并 处理换行，您甚至可能永远不会遇到这种情况。

如果您想在不使用 minmax 的情况下使列再次变得稳定，您可以使用百分比而不是像素并保持灵活性。但是您使用什么百分比？33.33%？只要您没有 gap，这就可以了——否则，间隙会增加宽度并溢出容器。您可以通过在列内添加填充来伪造间隙，但这有点笨拙且不均匀。

这一切都源于 Wes Bos 的一条很棒的推文

🔥 CSS Grid 中获得等宽列的视觉指南 pic.twitter.com/PY4yYokY18

— Wes Bos (@wesbos) 2020年5月1日

我知道很多人都会遇到这种情况——根据我收到的关于 网格膨胀 文章的邮件数量——所以值得理解一下这一切为何如此。它可能应该更容易，但我对如何改进没有特别的建议。