当使用 grid-template-columns: 1fr 2fr 时，左侧区域（L1/R1）异常窄缩，并非网格定义失效，而是因 .R2 内嵌的 display: grid 和 gap: 200px 导致整体内容宽度膨胀，挤压了第一列可用空间；改用百分比或显式约束可彻底解决。
当使用 `grid-template-columns: 1fr 2fr` 时，左侧区域（l1/r1）异常窄缩，并非网格定义失效，而是因 `.r2` 内嵌的 `display: grid` 和 `gap: 200px` 导致整体内容宽度膨胀，挤压了第一列可用空间；改用百分比或显式约束可彻底解决。
在 CSS Grid 布局中，fr（fraction）单位并非绝对比例，而是基于剩余可用空间进行分配。这意味着：只有当容器内所有子项的固有宽度（如图片、文本流、内联块等）总和未超出容器宽度时，1fr 2fr 才能准确实现 1:2 的视觉分割。而您的代码中存在两个关键干扰因素：
? 问题根源分析
.R2 中过大的 gap: 200px
您为 .R2 设置了 display: grid; grid-template-columns: repeat(3, 1fr); gap: 200px; —— 这意味着仅间隙就占用 2 × 200px = 400px，极大推高 .R2 的最小宽度，迫使父级 .shop-page-grid 为容纳它而压缩左侧列（L1/R1），即使它们逻辑上应占 1/3。.product 的 padding-right: 220px
每个产品项强制右侧留白 220px，进一步加剧宽度溢出，尤其在小屏或紧凑布局下形成连锁挤压。嵌套 Grid + Flex 混合未设尺寸边界
.R2 同时应用了 display: grid（外层）和内部 .product { display: flex }，但未限制 .product 或其子元素的最大宽度，导致内容自由撑开。
✅ 推荐解决方案：优先使用百分比 + 合理约束
将 .shop-page-grid 的列定义从 1fr 2fr 改为明确的百分比，并配合 min-width: 0 防止内容溢出破坏分配：
.shop-page-grid {
display: grid;
grid-template-columns: 33.33% 66.67%; /* 精确 1:2 视觉比例 */
gap: 0;
border: 1px solid #888;
}
/* 关键修复：防止子元素撑开列宽 */
.L1, .R1, .L2, .R2 {
min-width: 0; /* 允许浏览器收缩超长内容 */
overflow-wrap: break-word;
}同时，移除 .R2 中破坏性的样式：
立即学习“前端免费学习笔记（深入）”；
/* ❌ 删除以下两行（它们是主因） */
.R2 {
/* display: grid; ← 删除 */
/* grid-template-columns: repeat(3, 1fr); ← 删除 */
/* gap: 200px; ← 删除 */
/* padding-right: 220px; ← 删除（在 .product 中） */
}
/* ✅ 替换为更稳健的三列产品网格 */
.R2 .image-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px; /* 合理间隙：16–24px 更安全 */
}
.product {
display: flex;
flex-direction: column; /* 垂直排列，避免水平撑宽 */
align-items: flex-start;
gap: 8px;
}
.product img {
width: 100%;
height: auto;
border-radius: 8px;
/* 移除 margin-right，改用 gap 控制间距 */
}
.product-info {
width: 100%; /* 确保文字不溢出 */
}?️ 补充优化建议
-
响应式增强：添加断点，小屏时改为单列
@media (max-width: 768px) { .shop-page-grid { grid-template-columns: 1fr; /* 移动端堆叠 */ } .R2 .image-grid { grid-template-columns: repeat(2, 1fr); } } - 图片性能：为 .small-image 添加 max-width: 100% 和 height: auto，确保响应式缩放。
-
表单宽度控制：限制 .R1 form 最大宽度，避免横向溢出：
.R1 form { max-width: 300px; /* 替代原 input 的 max-width */ width: 100%; }
✅ 总结
fr 单位强大但依赖“剩余空间”，一旦子内容（尤其是未约束的 Grid/Gap/Flex）产生隐式宽度膨胀，就会导致列宽失真。百分比定义提供确定性布局，配合 min-width: 0 和合理 gap 值，是解决此类挤压问题最直接、可靠的方式。 实际开发中，建议优先用 fr 处理弹性区域，用 % 或 rem 处理需精确比例的模块，并始终为嵌套容器设置 min-width: 0 防御性保护。
