如何消除CSS Grid网格元素底部的多余空白？

修改后的完整代码 #

CSS

.container {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 左侧列占比2，右侧列占比1 */
  grid-auto-rows: min-content; /* 每行高度仅适配内容最小高度 */
  gap: 1rem;
  width: 500px;
  margin: 0 auto;
}
.item {
  background: tomato;
}
.title {
  grid-column: 2;
  grid-row: 1;
}
.image {
  grid-column: 1;
  grid-row: 1 / span 3; /* 图片跨越右侧三行的高度范围 */
}
.desc-1 {
  grid-column: 2;
  grid-row: 2;
}
.desc-2 {
  grid-column: 2;
  grid-row: 3;
}

.image img {
  display: block;
}
.title, .desc-1, .desc-2 {
  margin-block: 0;
}

/* 小屏幕适配：标题保持首位 */
@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
  .image {
    grid-row: 2;
  }
}

HTML（无需修改）

<section class="container">
  <h2 class="item title">Lorem ipsum</h2>
  <div class="image">
    <img src="https://picsum.photos/300/200.jpg" />
  </div>
  <p class="item desc-1">Lorem ipsum dolor sit amet.</p>
  <p class="item desc-2">Sed ut perspiciatis unde.</p>
</section>

调整思路 #

原来用grid-template-areas布局时，图片元素跨了三行，导致这三行的总高度被图片的高度拉满，每行高度被均分——哪怕右侧单元格的内容远小于这个高度，自然就出现了底部空白。

修改后：

• 用grid-auto-rows: min-content强制每行高度仅适配该行内容的最小高度，不会被其他元素强行拉高；
• 通过grid-column和grid-row精准定位每个元素，让右侧三个红色单元格各自占据独立行，高度完全由自身内容决定；
• 小屏幕下只需通过媒体查询切换为单列布局，调整图片的行位置到标题之后，完全不用改动HTML结构，满足你的需求。

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