CSS GRID无法按顺序重新排列项目：；

Question

我正在尝试重新排列CSS GRID的顺序。

但是显然所有网格项目的默认订单值均为0。因此，将order: 1;应用于网格项目将在其他所有项目之后而不是之前进行。

我希望所有网格项目默认都具有升序。因此，我可以使用order: 2;将项目实际放置在第二位。

您能帮我吗？！

这里是一个例子，（我的实际代码有点复杂）

<div class="grid">

<p class="item">1</p>
<p class="item">2</p>
<p class="item two">3</p>
<p class="item">4</p>

</div>

.grid {
  display: grid;
  padding: 30px;
  justify-content: center;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
}

.two { order: 2; }

我已经尝试过，但是没有用；

.item:nth-child(1) { order:1; }
.item:nth-child(2) { order:2; }
.item:nth-child(3) { order:3; }
.item:nth-child(4) { order:4; }

Answer 1

[如果您查看有关MDN的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/order，您会看到订单的默认值为0，因此任何未明确设置订单的内容将成为前导元素，然后应用明确设置的来源。

您可以使用类似以下的内容。

.grid {
  display: grid;
  padding: 30px;
  justify-content: center;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
}

.item:nth-child(2) { order:3; }
.item:nth-child(3) { order:2; }
.item:nth-child(4) { order:4; }

<div class="grid">

<p class="item">1</p>
<p class="item">2</p>
<p class="item two">3</p>
<p class="item">4</p>

</div>