如何正确阻止CSS Grid列自动扩展？为何局部设置生效而全局不生效？

为什么给列单独设置overflow: hidden才生效？ #

咱们先拆解下CSS Grid的默认行为：网格项（也就是.grid里的每个<div>）默认的min-width是auto，这意味着它会优先保证能装下内部的内容，哪怕你给列设置了1fr的宽度。你之前给.grid容器加的min-width: 0和overflow: hidden，只会作用在容器本身，并不会传递到它的子网格项上——网格项该怎么撑宽度还是怎么撑。

而当你给某个列（比如.column-1）单独加overflow: hidden时，这个属性会触发网格项的收缩约束：浏览器会自动把这个网格项的min-width隐式改成0，这样它就不会再强行撑开宽度来容纳长文本了，而是严格遵守你设置的1fr尺寸，超出的内容自然就被隐藏了。

如何全局应用这个效果？ #

有几个简单直接的方案，你可以按需选择：

方案1：给所有网格项统一设置overflow: hidden #

直接给.grid的所有子元素加样式，让每一列都具备收缩约束：

.grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  overflow: hidden;
}
.grid > div {
  overflow: hidden; /* 全局给所有列加收缩约束 */
}

方案2：强制网格项的最小宽度为0 #

如果不需要隐藏内容，只是想让列严格遵守1fr尺寸，可以直接把网格项的min-width设为0：

.grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  overflow: hidden;
}
.grid > div {
  min-width: 0; /* 取消默认的min-width:auto，让列可以收缩 */
}

要是需要隐藏溢出内容，再额外加上overflow: hidden即可。

方案3：修改grid-template-columns为minmax(0, 1fr) #

这个方法更高效，直接在容器的列定义里搞定，不用给子元素加额外样式：

.grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); /* 用minmax限制列的最小宽度为0 */
  overflow: hidden;
}

minmax(0, 1fr)的意思是：列的最小宽度是0，最大宽度是1fr，这样每一列都会严格按照比例分配宽度，不会被内容撑开。

内容的提问来源于stack exchange，提问作者Vince