Chrome中CSS Grid任意数量列自动填充全宽属性报错如何解决？

完整实现代码 #

HTML结构（和你现有结构完全兼容） #

<div class="my-grid">
    <div class="some-column"></div>
    <div class="some-column"></div>
    <div class="some-column"></div>
</div>

CSS样式 #

.my-grid {
  /* 必须声明grid布局，缺少该属性会导致Chrome判定grid-template-columns无效 */
  display: grid;
  /* 核心逻辑：限制列数2-4，自动填充且占满全宽 */
  grid-template-columns: repeat(auto-fit, minmax(clamp(25%, 100%/4, 50%), 1fr));
  /* 可选：自定义列/行间距，可按需调整 */
  gap: 16px;
  /* 确保grid容器自身占满父级宽度 */
  width: 100%;
}

规则说明 #

• 用auto-fit替代你之前使用的auto-fill：会自动折叠未被占用的空白列，让实际存在的子元素自动拉伸占满整个容器宽度
• clamp(25%, 100%/4, 50%) 用来间接限制列数范围：
  • 最小列宽25%：保证最多不会超过4列
  • 最大列宽50%：保证最少不会少于2列
  • 列宽会根据容器宽度和子元素数量自动适配，列数始终在2-4之间
• 如果需要保留最小100px列宽限制，可将minmax的第一个参数改为clamp(max(100px, 25%), 100%/4, 50%)即可

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