css - 使用纯 CSS 网格将 2 个垂直元素放置在屏幕中间

Question

.container {
  display: grid;
  place-items: center;
  grid-gap: 20px;
  height: 200px;
  border: 1px solid red;
  }
  
  .top {
  border: 1px solid blue;
  }
  
  .bottom {
  border: 1px solid green;
  }

<div class="container">
  <div class="top">Top Element</div>
  <div class="bottom">Bottom Element</div>
</div>

我缺少什么来将这些展位元素放置在 .container 彼此相邻 的中间，垂直方向只有 20 像素的间隙？目前他们的展位位于每个网格单元的中心。当然，我可以使用简单的包装器并用一些边距替换网格间隙。但我希望尽可能地减少 CSS 和包装器元素。

Answer 1

您可以使用 align-self: end & align-self: start 给 grid items 来做到这一点:

.container {
  display: grid;
  place-items: center;
  grid-gap: 20px;
  height: 200px;
  border: 1px solid red;
}

.top {
  align-self: end;
  border: 1px solid blue;
}

.bottom {
  align-self: start;
  border: 1px solid green;
}

<div class="container">
  <div class="top">Top Element</div>
  <div class="bottom">Bottom Element</div>
</div>

或者用 align-content: center 给网格容器:

.container {
  display: grid;
  place-items: center;
  align-content: center;
  /*grid-gap: 20px;*/
  height: 200px;
  border: 1px solid red;
}

.top {
  border: 1px solid blue;
}

.bottom {
  border: 1px solid green;
}

<div class="container">
  <div>Element</div>
  <div class="top">Top Element</div>
  <div>Element</div>
  <div class="bottom">Bottom Element</div>
  <div>Element</div>
</div>