如何将中间的网格项目从3个项目向下放置，并将第一个和第三个项目放在顶部？

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

.container {
  display: flex;
  flex-direction: column;
}
.item {
  order: 2; /* 设置项目的排列顺序 */
}
.item:first-child {
  order: 1; /* 设置第一个项目的排列顺序 */
}
.item:last-child {
  order: 3; /* 设置第三个项目的排列顺序 */
}

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr; /* 定义单列布局 */
  grid-template-rows: auto auto auto; /* 定义3行 */
}
.item:first-child {
  grid-row: 1; /* 第一个项目放在第1行 */
}
.item:last-child {
  grid-row: 3; /* 第三个项目放在第3行 */
}