html - CSS Grid如何将元素推到底部然后再推到左边

Question

我有一个带有 5 个按钮的网格，每行只有 2 个按钮。如果有奇数个按钮，我希望第一行只有一个按钮。

我的CSS:

.container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

<div class="container">
    <button>A</button>
    <button>B</button>
    <button>C</button>
    <button>D</button>
    <button>E</button>
</div>

布局:

A B
C D
E

所需布局:

A
B C
D E

Answer 1

换句话说，您希望您的第二个按钮在从最后一个开始计算的偶数位置时位于第一列中:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  margin: 10px;
}

.container button:nth-child(2):nth-last-child(even) {
  background-color: yellow;
  grid-column: 1;
}

<div class="container">
  <button>A</button>
  <button>B</button>
  <button>C</button>
  <button>D</button>
  <button>E</button>
</div>

<div class="container">
  <button>A</button>
  <button>B</button>
  <button>C</button>
  <button>D</button>
</div>

<div class="container">
  <button>A</button>
  <button>B</button>
  <button>C</button>
</div>

<div class="container">
  <button>A</button>
  <button>B</button>
</div>