当使用 grid-template-columns: repeat(3, 1fr) 创建三列网格时，若首列提前收缩而其余两列保持宽度，通常源于某列内联内容（如长单词、未换行文本或固定宽元素）破坏了 1fr 的弹性分配机制，导致网格“吹胀”（blowout），进而触发非对称响应行为。
当使用 `grid-template-columns: repeat(3, 1fr)` 创建三列网格时，若首列提前收缩而其余两列保持宽度，通常源于某列内联内容（如长单词、未换行文本或固定宽元素）破坏了 `1fr` 的弹性分配机制，导致网格“吹胀”（blowout），进而触发非对称响应行为。
在你描述的 .home-catalogue-grid 布局中，三列本应严格均分容器宽度，但实际观察到第一列率先缩窄——这并非媒体查询提前生效，而是典型的 Grid Blowout（网格吹胀）现象：某一列的内容（例如 <a> 标签中的长英文词、未设置 word-break 的 URL、或 aspect-ratio 与父容器冲突的图片容器）无法自然折行或收缩，迫使该列最小宽度（min-width）超出 1fr 理论值，从而挤压其余列的可用空间。由于浏览器按 DOM 顺序计算轨道尺寸，首列内容“撑开”后，后续列被迫在剩余空间中重新分配，造成视觉上“第一列先变窄”的错觉。
✅ 根本解决方案
为确保三列真正同步响应，请在网格项（.product）上显式约束内容溢出行为：
.home-catalogue-grid .product {
/* 关键：防止内容撑开网格项 */
min-width: 0; /* 重置默认 min-width: auto，允许 fr 轨道压缩 */
overflow: hidden; /* 防止内容溢出影响布局 */
}
/* 对内部文本内容强制换行（尤其适用于长链接或产品名） */
.product-info a {
word-break: break-word; /* 或使用 break-all（更激进） */
white-space: normal; /* 确保不被 nowrap 锁死 */
}同时检查所有背景图容器是否隐含尺寸干扰：
.product {
aspect-ratio: 1/1 !important;
/* ⚠️ 注意：!important 可能覆盖响应式规则，建议改用无!important的条件类 */
/* 推荐替代写法： */
/* aspect-ratio: 1/1; */
}? 快速诊断技巧
-
临时添加边框与背景色，直观观察各列实际宽度：
.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; } - 禁用所有 !important 和 aspect-ratio，测试基础网格是否均匀；
- 审查 DevTools 中 .product 的 computed min-width —— 若显示 auto（而非 0），即为罪魁祸首。
? 总结
1fr 并非绝对“等分”，而是“剩余空间的等份”，其前提是所有网格项能自由收缩至 0。min-width: auto（浏览器默认）会阻止此项，因此必须显式设置 min-width: 0。配合 overflow: hidden 与 word-break，即可彻底杜绝单列异常缩放，让三列在 900px 断点前始终保持严格等宽，并在媒体查询中平滑过渡至双列/单列布局。
立即学习“前端免费学习笔记（深入）”；
