如何在CSS Grid中垂直居中放置内容？

100

巴恩斯

我正在尝试将一侧的两个div垂直对齐，将另一侧的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>

迈克尔·本杰明

将网格项放入弹性容器中。

使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。