使用普通的CSS Grid将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 中间的垂直位置，只有20px的间隙？目前，他们的展位位于每个网格单元的中心。 当然，我可以使用简单的包装并用一些边距替换网格间隙。但我希望尽可能少地使用更少的CSS和包装元素。

Answer 1

您可以使用align-self: end＆amp; 网格项的align-self: start：

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

或网格容器的<{1}} ：

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

Answer 2

您需要定义grid-template-columns，如果您希望彼此相邻

.container {
  display: grid;
  justify-content: center;
    align-items: center;
  grid-gap: 20px;
  grid-template-columns: repeat(2, max-content);
  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>

Answer 3

我这样想出来了。不确定这是最好的解决方案，但会发布。

＆＃13;

＆＃13;

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

.top {
  border: 1px solid blue;
}

.bottom {
  border: 1px solid green;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这样我可以插入尽可能多的子元素。我假设MS浏览器不支持 place-items 和 place-content 简写，因此您应该使用 align-content 和对齐 - 内容而不是。