如何使用CSS移除CSS Grid父容器多余空白，实现容器高度随子元素自适应

导致你布局出现底部多余空白的核心原因有两个：

• 父容器.abc设置了固定高度height: 320px，强制父容器高度不会随子元素高度自适应
• grid-template-rows属性中使用了错误的单位1fe，正确的弹性等分单位为1fr，但1fr会自动填充剩余可用空间，也会导致父容器高度不受子元素内容控制

具体修改方案 #

你只需要调整.abc的CSS属性即可，修改后的完整代码如下：

CSS代码 #

.abc{
  display: grid;
  grid-template-columns: repeat(12,6.697%);
  /* 把1fr改为auto，让后续行高由内容高度决定 */
  grid-template-rows: 18px repeat(5, auto);
  border:1px solid green;
  /* 移除固定高度，让父元素高度由内容撑开 */
  /* height:320px */
}
.one{
  grid-column: 4/span 6;
  grid-row: 2/span 5;
  border:1px solid;
  min-height:260px;
  height: 270px;  
}
.two {
  grid-row: 1/span 5;
  grid-column: 1/5;
  border:1px solid #ee0;
}

HTML代码 #

<div class="abc">
  <div class="one">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates culpa iste facaudantium Lorem ipsum, 
    </p>
  </div>
  <div class="two">
    tooo
  </div>
</div>

效果说明 #

修改后父容器高度会完全由子元素高度决定，你后续调整.one的高度为任意值（比如290px），父容器都会自动适配包裹，不会出现多余的底部空白，不需要手动修改父容器高度。

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