除了最后一个应该使用 CSS 网格位于底部的项目之外，所有项目都沿垂直轴居中？

Question

我正在尝试使用 'Method 5 CSS Grid Layout' 让在垂直轴上工作。

目标是让所有项目都沿垂直轴居中，除了最后一个应该使用 CSS 网格位于底部？

要求是：

居中项目的数量可以变化。
容器的高度可以变化。
无法更改 HTML。

如您所见，我第一次尝试从水平方向转换为垂直方向时没有成功：

为什么商品乱序？
为什么最后一项没有放在底部？
我该如何解决这个问题？

ul {
  display: grid;
  grid-template-columns: 1fr repeat(3, auto) 1fr;
  grid-column-gap: 5px;
  justify-items: center;
}

ul li:nth-child(1) {
  grid-column-start: 2;
}

ul li:nth-child(4) {
  margin-left: auto;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
  background: pink;
}

li {
  padding: 5px;
  background: #aaa;
}

p {
  text-align: center;
}


/* My attempt to get this working on a vertical layout */

ol {
  height: 400px;
  display: grid;
  grid-template-rows: 1fr repeat(3, auto) 1fr;
  row-gap: 5px;
  justify-items: center;
}

ol li:nth-child(1) {
  grid-row-start: 2;
  background-color: coral;
}

ol li:nth-child(4) {
  margin-top: auto;
  background-color: chartreuse;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>| true center |</span></p>

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>

Answer 1

你差不多好了，需要补充grid-auto-flow: column。如果你想在相反的轴上做同样的事情，你必须改变流量算法。

ul {
  display: grid;
  grid-template-columns: 1fr repeat(3, auto) 1fr;
  grid-column-gap: 5px;
  justify-items: center;
}

ul li:nth-child(1) {
  grid-column-start: 2;
}

ul li:nth-child(4) {
  margin-left: auto;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
  background: pink;
}

li {
  padding: 5px;
  background: #aaa;
}

p {
  text-align: center;
}


/* My attempt to get this working on a vertical layout */

ol {
  height: 400px;
  display: grid;
  grid-template-rows: 1fr repeat(3, auto) 1fr;
  grid-auto-flow: column;
  row-gap: 5px;
  justify-items: center;
}

ol li:nth-child(1) {
  grid-row-start: 2;
  background-color: coral;
}

ol li:nth-child(4) {
  margin-top: auto;
  background-color: chartreuse;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>| true center |</span></p>

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>

除了最后一个应该使用 CSS 网格位于底部的项目之外，所有项目都沿垂直轴居中？

All items centered along the vertical axis except the last which should sit on the bottom using CSS Grid?

css

css-grid