通过为 Grid 容器设置 display: grid 并合理定义子元素高度（如 height: 100%），配合父容器高度继承链，可使文本内容区与图片列在大屏下严格等高。
通过为 grid 容器设置 `display: grid` 并合理定义子元素高度（如 `height: 100%`），配合父容器高度继承链，可使文本内容区与图片列在大屏下严格等高。
在使用 CSS Grid 构建响应式双栏布局时，常见需求是让不同内容类型的列（如左侧文字区块、右侧图片）在视觉上保持统一高度，尤其当两者高度天然不一致时（如图片尺寸固定而文本行数可变）。本例中，目标是在 ≥992px 断点下启用 grid-template-columns: 40% 60%，并确保 .wrapper（文本容器）与 <img> 高度完全一致。
关键在于建立可靠的高度传递链：Grid 容器本身需有明确的“高度参考”，而子元素需主动拉伸填满可用空间。默认情况下，<img> 是替换元素，其高度由原始尺寸或 CSS 显式设定决定；若仅设 width: 100%，高度会按宽高比自适应，无法自动匹配另一列高度。因此，解决方案是：
- 确保 Grid 容器具备可计算高度：本例中 #sec-1 无显式高度，但其子项（.wrapper 和 <img>）将共同撑开容器——此时需让二者都参与“高度竞争”；
- 强制图片拉伸至容器高度：在 @media (min-width: 992px) 中添加 img { height: 100%; object-fit: cover; }，其中 object-fit: cover 可防止图片变形，同时保证填满区域；
- 避免高度塌陷干扰：.wrapper 已有 padding 和背景渐变，无需额外高度声明；但需注意其内部元素（如 <p>、<a>）不应产生外边距塌陷影响整体高度计算。
✅ 推荐完整 CSS 补充如下：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
@media only screen and (min-width: 992px) {
#sec-1 {
display: grid;
grid-template-columns: 40% 60%;
/* 可选：添加 gap 控制间距 */
/* gap: 20px; */
}
#sec-1 > .wrapper,
#sec-1 > img {
height: 100%; /* 关键：使两列均继承父 Grid 行高 */
}
#sec-1 img {
width: 100%;
height: 100%;
object-fit: cover; /* 保持比例填充，裁剪多余部分 */
display: block;
}
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- height: 100% 要求父元素（即 #sec-1）有明确高度来源。由于本例中 #sec-1 高度由子项内容撑开，因此两列会自然趋于等高——前提是两者均设 height: 100% 且无 min-height/max-height 干扰；
- 若文本内容过短导致 .wrapper 高度小于图片，可对 .wrapper 添加 min-height: 100% 或 display: flex; flex-direction: column; 配合 flex: 1 实现弹性填充；
- 移动端（<992px）应移除 Grid 布局，改用 flex 或块级流式排版，并为图片设置 max-width: 100% 保证响应性。
最终效果：在大屏下，文字区与图片严格等高，视觉均衡；小屏下自动回退为垂直堆叠，兼顾可访问性与移动端体验。
