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

Question

我使用 display:grid not 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>

简而言之，我想将 div 拉得更近，以便它们在第二张照片中显示出来

Answer 1

使用 CSS 网格

以下演示展示了如何仅使用网格布局来实现所需的布局。

它是一个6 x 3 网格，其中左侧的项目每个跨越 3 行，右侧的项目每个跨越 2 行。中心的项目跨越所有 6 行。

使用grid-row 和grid-column 属性在其位置调整每个网格项。

实现这种布局的诀窍是行多于列。

.container {
  display: grid;
  grid-template-columns: 1.5fr 2fr 1fr;
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 30px;
  height: 100vh;
}

.grid-item {
  background: #eee;
  width: 100%;
}

.center {
  grid-row: 1 / span 6;
  grid-column: 2 / span 1;
}

.left1 {
  grid-row: 1 / span 3;
  grid-column: 1 / span 1;
}

.left2 {
  grid-row: 4 / span 3;
  grid-column: 1 / span 1;
}

.right1,
.right2,
.right3 {
  grid-column: 3 / span 1;
}

.right1 { grid-row: 1 / span 2; }
.right2 { grid-row: 3 / span 2; }
.right3 { grid-row: 5 / span 2; }

<div class="container">
  <div class="grid-item left1">left1</div>
  <div class="grid-item left2">left2</div>
  <div class="grid-item center">center</div>
  <div class="grid-item right1">right1</div>
  <div class="grid-item right2">right2</div>
  <div class="grid-item right3">right3</div>
</div>

使用 CSS Grid 和 Flexbox

另一种选择是使用1 x 3 网格并使每个网格列成为弹性容器。

如果您使用这种方法，您将需要更改 HTML 的结构。

:root {
  --spacing: 30px;
}

.container {
  display: grid;
  grid-template-columns: 1.5fr 2fr 1fr;
  grid-gap: var(--spacing);
  height: 100vh;
}

.grid-item {
  display: flex;
}

.grid-item div {
  background: #eee;
  flex-basis: 100%;
}

.col-1,
.col-3 {
  flex-direction: column;
  justify-content: space-between;
}

.margin-bottom {
  margin-bottom: var(--spacing);
}

<div class="container">
  <div class="grid-item col-1">
    <div class="margin-bottom">left1</div>
    <div>left2</div>
  </div>
  <div class="grid-item col-2">
    <div>center</div>
  </div>
  <div class="grid-item col-3">
    <div class="margin-bottom">right1</div>
    <div class="margin-bottom">right2</div>
    <div>right3</div>
  </div>
</div>