使用 CSS Grid 布局时，图片默认会撑开父容器尺寸，造成网格溢出；通过将图片设为 position: absolute 并配合 position: relative 的父容器，可使其脱离文档流、严格限制在网格单元内。
使用 css grid 布局时，图片默认会撑开父容器尺寸，造成网格溢出；通过将图片设为 `position: absolute` 并配合 `position: relative` 的父容器，可使其脱离文档流、严格限制在网格单元内。
在基于 CSS Grid 构建动态网格（如 50×50）的 React 应用中，一个常见痛点是：当向 .grid-elt 单元格内插入 时，即使设置了 width: 100%; height: 100%，图片仍会破坏原有网格尺寸——导致整个 .grid 容器高度/宽度超出预期，甚至触发滚动或溢出父容器。其根本原因在于：普通流内图片具有固有尺寸（intrinsic size），会参与 Grid 轨道的大小计算（尤其是 min-content 或 auto 尺寸场景），从而影响 1fr 分配结果。
解决该问题的核心思路是：让图片不参与布局计算。最直接有效的方式是将其设为绝对定位：
.grid-elt {
border: 1px solid red;
position: relative; /* 为子元素提供定位上下文 */
}
.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain; /* 可选：保持宽高比并完整显示 */
}
✅ 关键点说明：
- position: relative 在 .grid-elt 上声明，确保 absolute 定位的图片以该单元格为参考系；
- top: 0; left: 0; width: 100%; height: 100% 使图片完全贴合单元格边界；
- object-fit: contain（推荐）可避免图片拉伸变形；若需填满且允许裁剪，可改用 cover；
- 此方案不依赖 flex 或 display: contents 等复杂技巧，兼容性好（支持所有现代浏览器）。
⚠️ 注意事项：
- 绝对定位后，图片不再影响父容器的最小尺寸（min-width/min-height），因此不会触发 Grid 自动扩容；
- 若单元格内容需支持文字+图片混合排版，请额外为文字添加 position: relative; z-index: 1; 避免被图片遮挡；
- 不建议仅靠 max-width: 100%; height: auto 解决——这无法阻止图片的固有尺寸干扰 fr 轨道计算；
- 对于响应式网格，建议配合 aspect-ratio（现代浏览器）或 padding-top 技巧固定单元格比例，进一步增强稳定性。
综上，Grid 溢出问题并非 repeat(50, 1fr) 本身缺陷，而是内容参与尺寸计算所致。通过“脱离文档流 + 精确控制尺寸”的组合策略，即可在保持网格结构稳定的同时，灵活渲染图像内容。
