如何使用display:grid垂直对齐网格项并填充所有垂直空白空间？

我使用display:grid而非flex布局来展示部分div元素。

当前页面效果如下：

期望实现的页面效果如下：

对应代码如下：

.container {
  display: grid;
  grid-template-columns: 1.5fr 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 40px 40px;
  grid-auto-flow: row dense;
  justify-items: stretch;
  align-items: stretch;
  grid-template-areas: "left1 center-div right1" "left1 center-div right2" "left2 center-div right3";
  width: 100%;
  height: 100%;
}

.left1 {
  grid-area: left1;
}

.left2 {
  grid-area: left2;
}

.center-div {
  grid-area: center-div;
}

.right1 {
  grid-area: right1;
}

.right2 {
  grid-area: right2;
}

.right3 {
  grid-area: right3;
}

<div class="container owl-carousel owl-theme">

  <div class="grid-item left1">
    left image 1
  </div>

  <div class="grid-item left2">
    left image 2
  </div>

  <div class="grid-item center-div">
    center image
  </div>

  <div class="grid-item right1">
    right image 1
  </div>

  <div class="grid-item right2">
    right image 2
  </div>

  <div class="grid-item right3">
    right image 3
  </div>

</div>

解决方案 #

你代码里的gap: 40px 40px就是控制网格元素间距的属性，第一个值对应行间距，第二个对应列间距，直接调小这两个数值就能缩小间距，比如改成gap: 8px 12px就可以得到更紧凑的布局，你可以根据实际渲染效果调整到你想要的大小即可。

另外你的容器上添加了owl-carousel类，这个轮播插件默认会给子元素加额外边距，如果调整gap后间距还是不符合预期，可以补充下面的样式覆盖插件的默认边距：

.container .grid-item {
  margin: 0 !important;
  padding: 0;
}
/* 如果子项内放置的是图片，可以加下面的样式保证图片填满容器 */
.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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