CSS Grid能否根据文本内容自动调整行跨度？

好问题！遗憾的是，CSS Grid本身并没有原生支持自动根据内容高度调整网格项行跨度的特性——当你设置grid-auto-rows: 100px时，网格项默认只会占用1行，内容超出时自然会溢出。不过我们可以通过两种实用的方法解决这个问题，适配不同的需求场景：

方案一：JS动态计算行跨度（严格保持100px行高倍数） #

如果必须让行高严格保持100px的整数倍（内容占2行就是200px，3行就是300px），可以通过JavaScript动态计算每个网格项的内容高度，再设置对应的行跨度：

// 获取所有网格项
const gridItems = document.querySelectorAll('.fixed-grid > div');
// 定义基础行高
const baseRowHeight = 100;

gridItems.forEach(item => {
  // 获取内容实际高度（包括溢出部分）
  const contentHeight = item.scrollHeight;
  // 计算需要的行跨度（向上取整）
  const requiredSpan = Math.ceil(contentHeight / baseRowHeight);
  // 设置网格项的行跨度
  item.style.gridRow = `auto / span ${requiredSpan}`;
});

这个方法能精准控制行高为100px的倍数，完全匹配你需要的效果。如果内容会动态变化（比如用户输入、异步加载），可以把这段逻辑封装成函数，在内容更新时重新调用。

方案二：使用minmax()实现自适应行高（非严格100px倍数） #

如果不需要严格保持行高为100px的整数倍，只是希望行高至少100px，内容超出时自动扩展，可以修改grid-auto-rows的设置：

.fixed-grid {
  grid-auto-rows: minmax(100px, auto);
}

这样每个网格行的最小高度是100px，当内容高度超过100px时，行高会自动调整到适配内容的高度。这个方案纯CSS实现，无需JavaScript，但行高不再是严格的100px倍数，适合对行高对齐要求不高的场景。

总结一下：如果必须严格遵循100px的行高倍数，方案一是目前唯一可行的方法；如果可以接受行高自适应扩展，方案二更简洁。

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