内容过少时如何让CSS Grid列占满指定空间且保持响应性？

问题根因 #

你使用的fit-content(780px)默认逻辑为：列宽跟随内容宽度动态变化，最大不超过780px，当内容宽度小于780px时列宽等于内容宽度，因此内容过少时无法占满预期的780px空间。

解决方案 #

将grid-template-columns配置中的fit-content(780px)替换为minmax(min(780px, 100%), 780px)即可，修改后的完整配置如下：

grid-template-columns: 1fr 1fr 0px minmax(min(780px, 100%), 780px) 0px 1fr 1fr;

效果说明 #

• 当网格容器可用宽度≥780px时，该列宽度固定为780px，无论内容多少都会占满780px空间，匹配需求
• 当网格容器可用宽度<780px时，该列自动占满全部可用宽度，不会出现横向溢出，完全保留响应性
• 如果需要实现内容超过780px时可以继续扩展的效果，只需把最大值从780px改为fit-content(100%)即可，下限规则保持不变

旧浏览器兼容方案 #

如果需要兼容不支持CSS比较函数的旧版浏览器，可以通过媒体查询实现同等效果：

/* 屏幕宽度≥780px时固定列宽 */
@media (min-width: 780px) {
  .grid-container {
    grid-template-columns: 1fr 1fr 0px 780px 0px 1fr 1fr;
  }
}
/* 屏幕宽度<780px时自适应占满可用空间 */
@media (max-width: 779px) {
  .grid-container {
    grid-template-columns: 1fr 1fr 0px 1fr 0px 1fr 1fr;
  }
}

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