如何实现撑满容器边缘且尺寸受限的grid-template-columns布局

需求场景分析 #

你需要实现单元格数量未知可变的Grid网格布局，同时满足两个要求：

• 每个单元格尺寸介于200px到500px之间
• 所有单元格始终完全撑满容器边缘

你尝试的两种写法存在以下本质问题：

• gridTemplateColumns: repeat(auto-fit, minmax(200px, 1fr))：1fr没有上限，单行单元格数量较少时，单元格宽度会超出500px限制
• gridTemplateColumns: repeat(auto-fit, minmax(200px, 500px))：列轨道最大宽度固定为500px，不会拉伸填充剩余容器空间，导致行尾出现空白

实现方案 #

通过网格容器动态列规则+子项宽度限制组合即可实现需求：

1. 网格容器样式

.grid-container {
  display: grid;
  /* 自动生成列，每列最小200px，优先等分容器宽度 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; /* 可自定义单元格间距，不需要可删除 */
  width: 100%;
}

2. 网格子项样式

.grid-item {
  /* 限制单元格最大宽度不超过500px */
  max-width: 500px;
  /* 让子元素撑满分配到的列宽 */
  width: 100%;
  /* 如果希望单元格在列宽超过500px时居中显示，可追加下面这句 */
  margin: 0 auto;
}

边界情况说明 #

当容器宽度 > 当前行单元格数量 * 500px时，两个需求会出现互斥：如果要求单元格不超过500px，行尾必然会出现空白；如果要求必须撑满容器，单元格宽度就会超过500px。
如果接受容器宽度过大时网格整体居中而非撑满视口，可给网格容器追加以下样式：

.grid-container {
  max-width: calc(500px * 5); /* 5为你期望的最大单行列数，可自定义 */
  margin: 0 auto;
}

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