如何在网格中垂直移动元素到末尾？

Question

我需要两个 div 位于 body 的顶部，一个 div（蓝色的）位于 body 的底部。所有这些都必须水平居中。我需要使用网格来完成。我究竟做错了什么？请帮助。

body {
  display: grid;
  height: 500px;
  align-content: start;
  justify-content: center;
  background: gray;
}

div {
  width: 50px;
  height: 50px;
  background: red;
}

div:nth-of-type(3) {
  align-self: end;
  background: blue;
}

<div></div>
<div></div>
<div></div>

Answer 1

它已经按照你定义的那样做了。三个 div，两个红色和一个蓝色。顶部有两个红色，底部有两个蓝色。而且它也是水平居中的。