在 CSS Grid 布局中，当左右两列内容类型不同（如文本容器 vs 图片）时，可通过设置 height: 100% 并确保父容器具有明确高度或采用 align-items: stretch（默认行为），使两列自动拉伸至相同高度。
在 css grid 布局中，当左右两列内容类型不同（如文本容器 vs 图片）时，可通过设置 `height: 100%` 并确保父容器具有明确高度或采用 `align-items: stretch`（默认行为），使两列自动拉伸至相同高度。
要实现 40% / 60% 宽度的两列网格（grid-template-columns: 40% 60%）保持等高，关键在于理解 Grid 的默认对齐机制与子元素尺寸继承关系：
✅ Grid 默认行为已支持等高：
CSS Grid 容器默认启用 align-items: stretch，这意味着所有直接子项会自动拉伸以填满容器的行高（即等高）。因此，只要 .wrapper 和 都是 #sec-1 的直接子元素（当前 HTML 结构满足），它们天然具备等高基础。
⚠️ 但图片默认不拉伸： 是替换元素（replaced element），其默认 height 由原始尺寸或 width + aspect-ratio 决定，不会自动继承父容器高度，即使 align-items: stretch 生效。因此需显式控制其尺寸。
? 推荐解决方案（简洁可靠）：
@media only screen and (min-width: 992px) {
#sec-1 {
display: grid;
grid-template-columns: 40% 60%;
/* 确保行高由内容最高者决定（默认即如此） */
}
/* 关键：让图片填充所在网格区域高度 */
#sec-1 > img {
height: 100%; /* 继承网格单元格高度 */
object-fit: cover; /* 可选：保持比例并裁剪填充（防变形） */
min-width: 0; /* 防止因 flex/grid 惯性导致 width: auto 抗拉伸 */
}
}
? 为什么 height: 100% 有效？
- Grid 容器为每列生成一个「网格单元格」（grid cell），该单元格高度由整行中最高子项内容决定（本例中通常是 .wrapper 的文本块）；
- #sec-1 > img 设置 height: 100% 后，将严格匹配其所在单元格的高度（即与 .wrapper 等高）；
- 添加 object-fit: cover 可避免图片被拉伸失真，同时确保视觉上完全覆盖区域。
? 注意事项：
- ✅ 必须使用 #sec-1 > img（子选择器），避免影响其他图片；
- ✅ 确保 #sec-1 在大屏下才启用了 Grid（如示例中的 @media (min-width: 992px)），小屏仍保持流式布局；
- ❌ 不要给 .wrapper 或 img 设置固定 height（如 height: 300px），否则会破坏响应性；
- ⚠️ 若 .wrapper 内容极短（如仅一行文字），可添加 min-height: 100% 或 display: flex; flex-direction: column; justify-content: center; 提升垂直居中体验。
✅ 最终效果：无论左侧文本多长、右侧图片原始尺寸如何，在 ≥992px 屏幕下，两列始终严格等高，布局稳固且语义清晰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
