如何修复CSS Grid行高自适应问题，实现预期布局？

问题根源 #

1. 图片未添加.image类，你写的grid-row定位规则完全没生效，图片只能占据默认的单个网格单元格。
2. 你给网格仅定义了2行（grid-template-rows: auto auto），却给图片设置grid-row-end:4，网格会自动生成多余的空行，直接打乱布局逻辑。
3. 最后一段<p>Some text here</p>未指定网格位置，它会自动填充到下一个可用单元格，导致布局错位。

修复后的代码 #

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 取消固定行数，让网格根据内容自动生成行 */
  gap: 1rem; /* 增加间距优化视觉效果 */
}

.image {
  /* 让图片从第1行延伸至最后一行（-1代表网格最后一行） */
  grid-row: 1 / -1;
  object-fit: cover; /* 保证图片比例不变，填充容器 */
  height: 100%; /* 图片高度自适应左侧列高度 */
}

h1, .desc {
  /* 标题和描述统一放在第2列 */
  grid-column: 2;
}

.full-width-text {
  /* 让最后一段文本横跨两列 */
  grid-column: 1 / -1;
}

HTML

<div class="container">
  <img src="https://placehold.co/400x400" class="image">
  <h1>Title</h1>
  <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p class="full-width-text">Some text here</p>
</div>

修复逻辑说明 #

1. 给图片补加.image类，让grid-row:1/-1规则生效，图片会占据左侧整列并自动匹配右侧内容的高度。
2. 删除固定行数定义，让网格根据内容自动生成行，避免多余空行干扰布局。
3. 给最后一段文本添加类并设置grid-column:1/-1，让它横跨两列，放在图片和右侧内容的下方。
4. 新增gap属性，让网格元素之间保留间距，提升布局美观度。

内容的提问来源于stack exchange，提问作者hemoglobin