【翻译】CSS网格中的等宽列有点奇怪

原文：Equal Width Columns in CSS Grid are Kinda Weird

现在一切都很灵活，如果你写一个 grid-template-columns：200px 200px 200px，就会得到等宽的3列，不过这样写法不多见。通常你只是想要等宽的3列。

我们可以使用fr来做，比如grid-template-columns：1fr 1fr 1fr，它通常表现正常，但是不像使用px那样稳定。不少元素（或者像

，长字符串比如url地址之类）会撑开列，无法实现你想要的效果，我称之为网格爆炸(grid blowout)。主要是因为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));
}

有点不熟悉，没关系，学习一下就OK。如果你总是设置max-width或让文字换行，可能永远也用不着这种写法。

如果不想用minmax，但又想让列宽固定，可以使用百分比代替px保持灵活性。不过用什么百分比呢？33.33%。不考虑gap的情况，这样做没问题，如果有gap宽度就会增加，导致实际宽度溢出container。你可以使用padding让column看起来拥有gap，只是有点点怪…