Question

我正在尝试将一侧的两个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>

Answer 1

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

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

Answer 2

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

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
  align-self: self-end;
}

.item3 {
  grid-area: item3;
  align-self: self-start;
}

.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;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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>
</body>
</html>

在要下拉的div [align-self: self-end/end]上使用.item2，在要保持在顶部的div [align-self: self-start/start]上使用.item3 。作为参考，您可以通过此链接

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

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

2 个答案: