css - 如何在 CSS Grid 中垂直居中内容？

Question

我正在尝试将一侧的两个 div 与另一侧的较大 div 垂直对齐。

这是我想要实现的目标的模型:

左侧两个较小的 div 占用了相当多的空间 - 看起来每个都占用了 50% 的高度。我知道我需要首先收紧 div，使其仅是实际 div 中内容量的高度，然后以某种方式水平对齐到较大的绿色 div。

我尝试过使用 align-items、justify-content 和 grid-template-rows，但我没有得到我正在寻找的响应式输出。

h2,
p {
  font-size: 14px;
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

.object {
  height: 400px;
  width: 500px;
  background: green;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'item1'
    'item2'
    'item3';
  background-color: orange;
}

.grid-container {
  display: grid;
  grid-template-areas: 
    'item2 item1' 
    'item3 item1';
  background-color: orange;
  border: 1px solid red;
}

.grid-container>div {
  border: 1px solid purple;
  background-color: orange;
}

<div class="grid-container">
  <div class="item1">
    <div class="object">
    </div>
  </div>
  <div class="item2">
    <h2>Title</h2>
  </div>
  <div class="item3">
    <p style="margin: 0px;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

Answer 1

将网格项放入 flex 容器中。

使用auto边距将它们推到位。

.grid-container > div {
  display: flex;             /* new */
  flex-direction: column;    /* new */
  border: 1px solid purple;
  background-color: orange;
}

.item2 {
  margin-top: auto;          /* new */
  grid-area: item2;
}

.item3 {
  margin-bottom: auto;       /* new */
  grid-area: item3;
}

h2,
p {
  font-size: 14px;
}

.item1 {
  grid-area: item1;
}

.object {
  height: 400px;
  width: 500px;
  background: green;

}

.grid-container {
  display: grid;
  grid-template-areas:
    'item1'
    'item2'
    'item3';
  background-color: orange;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'item2 item1'
    'item3 item1';
  background-color: orange;
  border: 1px solid red;
}

<div class="grid-container">
  <div class="item1">
    <div class="object">
    </div>
  </div>
  <div class="item2">
    <h2>Title</h2>
  </div>
  <div class="item3">
    <p style="margin: 0px;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>