当使用 grid-template-columns: repeat(3, 1fr) 创建三列等宽网格时，若某列内容（如长文本、未约束图像或内联元素）无法换行或收缩，浏览器会优先拉伸该列以容纳内容，造成“首列先缩放”假象——实际是首列内容触发了网格项最小尺寸保护机制（min-width: auto），破坏了 1fr 的均分逻辑。
当使用 `grid-template-columns: repeat(3, 1fr)` 创建三列等宽网格时，若某列内容（如长文本、未约束图像或内联元素）无法换行或收缩，浏览器会优先拉伸该列以容纳内容，造成“首列先缩放”假象——实际是首列内容触发了网格项最小尺寸保护机制（`min-width: auto`），破坏了 `1fr` 的均分逻辑。
在 CSS Grid 布局中，1fr 单位表示可用空间的等份分配，但前提是每个网格项（grid item）能自由收缩。默认情况下，所有块级元素（包括 .product）都具有 min-width: auto（即“内容最小宽度”），这意味着：只要内部内容（例如长单词、未设置 max-width 的图片、或 white-space: nowrap 的文本）无法折行或压缩，对应网格项就会拒绝缩小，进而迫使整个网格重新计算列宽——此时往往表现为第一列率先变窄或变宽，而其余列看似“滞后”，实则是因内容分布不均导致的渲染顺序与视觉错觉。
根本原因：min-width: auto 的隐式约束
即使所有列声明为 1fr，Grid 容器仍需尊重每个子项的固有最小宽度。例如：
- 若第一个 .product 内含一个 50 字符无空格字符串（如 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx），它无法折行；
- 浏览器必须为其预留至少 50 字符宽度，于是首列被“撑开”，剩余空间不足，后两列被迫压缩（甚至溢出）；
- 这并非媒体查询提前触发，而是响应式断点前就发生的布局“吹胀”（grid blowout）。
解决方案：显式重置最小宽度
在 .product 类上添加以下声明，强制其可收缩：
.home-catalogue-grid .product {
min-width: 0; /* 关键：覆盖默认 min-width: auto */
/* 其他原有样式保持不变 */
}✅ min-width: 0 告诉浏览器：“此元素可收缩至 0 宽度，即使内容理论上需要更多空间”。配合 1fr，即可确保三列严格按比例分配可用空间。
立即学习“前端免费学习笔记（深入）”；
补充建议（预防性优化）
-
文本内容：对可能溢出的文字容器（如 .product-info a）添加：
.product-info a { white-space: normal; /* 允许折行 */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } - 背景图安全：虽然你已用 aspect-ratio: 1/1 和 background-size: cover，但仍建议为 .product 显式设置 overflow: hidden，避免子元素意外溢出影响布局。
-
调试技巧：临时添加边框和背景色快速定位问题列：
.product:nth-child(3n+1) { outline: 2px solid magenta; } .product:nth-child(3n+2) { outline: 2px solid yellow; } .product:nth-child(3n+3) { outline: 2px solid cyan; }
总结
“首列先缩放”本质是 Grid 的合理行为，而非 bug——它是 CSS 尊重内容尺寸的体现。通过显式设置 min-width: 0，你主动解除了这一限制，让 1fr 回归其设计本意：公平分配空间。此方案轻量、兼容性好（支持所有现代 Grid 浏览器），且无需改动 HTML 结构或 JavaScript，是解决此类“网格吹胀”问题的标准实践。
