如何使用 CSS 网格重新排序列？

Question

如何使用 CSS 网格并通过 CSS 设置列的顺序。

使用 CSS 网格的 3x3 网格示例

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1px;
}
.grid>* {
  background: orange;
}

<div class="grid">
  <div class="fruit">Apple</div>
  <div class="color">Red</div>
  <div class="cost">$1.00</div>
  <div class="fruit">Banana</div>
  <div class="color">Yellow</div>
  <div class="cost">$1.20</div>
  <div class="fruit">Lime</div>
  <div class="color">Green</div>
  <div class="cost">$0.75</div>
</div>

但是，如果我尝试使用 grid-column 更改列的顺序，自动布局会失败

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1px;
  grid-template-areas: "column-1 column-2 column-3";
}
.grid>* {
  background: orange;
}

.fruit { grid-column: 3 / 4; }
.color { grid-column: 2 / 3; }
.cost { grid-column: 1 / 2; }

<div class="grid">
  <div class="fruit">Apple</div>
  <div class="color">Red</div>
  <div class="cost">$1.00</div>
  <div class="fruit">Banana</div>
  <div class="color">Yellow</div>
  <div class="cost">$1.20</div>
  <div class="fruit">Lime</div>
  <div class="color">Green</div>
  <div class="cost">$0.75</div>
</div>

我尝试使用order

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1px;
}
.grid>* {
  background: orange;
}

.fruit { order: 3; }
.color { order: 2; }
.cost { order: 1; }

<div class="grid">
  <div class="fruit">Apple</div>
  <div class="color">Red</div>
  <div class="cost">$1.00</div>
  <div class="fruit">Banana</div>
  <div class="color">Yellow</div>
  <div class="cost">$1.20</div>
  <div class="fruit">Lime</div>
  <div class="color">Green</div>
  <div class="cost">$0.75</div>
</div>

行变成了列，列变成了行？？？？

我试过这样的grid-template-areas

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1px;
  grid-template-areas: "column-1 column-2 column-3";
}
.grid>* {
  background: orange;
}

.fruit { grid-area: column-3; }
.color { grid-area: column-2; }
.cost { grid-area: column-1; }

<div class="grid">
  <div class="fruit">Apple</div>
  <div class="color">Red</div>
  <div class="cost">$1.00</div>
  <div class="fruit">Banana</div>
  <div class="color">Yellow</div>
  <div class="cost">$1.20</div>
  <div class="fruit">Lime</div>
  <div class="color">Green</div>
  <div class="cost">$0.75</div>
</div>

最终将所有行压缩成一行

如何更改列的顺序？

Answer 1

只要grid-auto-flow: column;

.grid {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1px;
}

.grid>* {
  background: orange;
}

.fruit {
  grid-column: 3/4;
}

.color {
  grid-column: 2/3;
}

.cost {
  grid-column: 1/2;
}

<div class="grid">
  <div class="fruit">Apple</div>
  <div class="color">Red</div>
  <div class="cost">$1.00</div>
  <div class="fruit">Banana</div>
  <div class="color">Yellow</div>
  <div class="cost">$1.20</div>
  <div class="fruit">Lime</div>
  <div class="color">Green</div>
  <div class="cost">$0.75</div>
</div>

Answer 2

简单如下：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow:dense; /* don't forget this */
  grid-gap: 1px;
}
.grid>* {
  background: orange;
}

/* adjust the grid-column value like you want */
.grid *:nth-child(3n + 1) { /*OR .fruit */
  grid-column:2;
}
.grid *:nth-child(3n + 2) { /*OR .color */
  grid-column:3;
}
.grid *:nth-child(3n + 3) { /*OR .cost */
  grid-column:1;
}

<div class="grid">
  <div class="fruit">Apple</div>
  <div class="color">Red</div>
  <div class="cost">$1.00</div>
  <div class="fruit">Banana</div>
  <div class="color">Yellow</div>
  <div class="cost">$1.20</div>
  <div class="fruit">Lime</div>
  <div class="color">Green</div>
  <div class="cost">$0.75</div>
</div>

您也可以像下面这样简化。您只需指定两列的位置，第三列将自动设置

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow:dense; 
  grid-gap: 1px;
}
.grid>* {
  background: orange;
}


.grid *:nth-child(3n + 1) { 
  grid-column:2;
}
.grid *:nth-child(3n + 2) { 
  grid-column:3;
}

<div class="grid">
  <div class="fruit">Apple</div>
  <div class="color">Red</div>
  <div class="cost">$1.00</div>
  <div class="fruit">Banana</div>
  <div class="color">Yellow</div>
  <div class="cost">$1.20</div>
  <div class="fruit">Lime</div>
  <div class="color">Green</div>
  <div class="cost">$0.75</div>
</div>