css - 使用 css 网格按类对列中的元素进行排序

Question

我正在尝试使用 css 网格(但不使用 JS)获取按类按列排序的 div 列表。

这是一个 HTML 示例:

<main>
<div class="A">A_1</div>
<div class="A">A_2</div>
<div class="B">B_1</div>
<div class="A">A_3</div>
<div class="D">D_1</div>
<div class="B">B_2</div>
<div class="C">C_1</div>
<div class="A">A_4</div>
<div class="B">B_3</div>
<div class="C">C_2</div>
<div class="A">A_N</div>
<div class="C">C_3</div>
<div class="B">B_4</div>
<div class="C">C_4</div>
<div class="B">B_N</div>
<div class="C">C_N</div>
<div class="D">D_2</div>
<div class="D">D_3</div>
<div class="D">D_4</div>
<div class="D">D_N</div>
</main>

所需的输出应如下所示:

-------------------------
|  A  |  B  |  C  |  D  |
-------------------------
| A_1 | B_1 | C_1 | D_1 |
-------------------------
| A_2 | B_2 | C_2 | D_2 |
-------------------------
| A_3 | B_3 | C_3 | D_3 |
-------------------------
| A_4 | B_4 | C_4 | D_4 |
-------------------------
| A_N | B_N | C_N | D_N |
-------------------------

有没有办法做到这一点？我试过使用 grid-template-areas 但要么我必须一个一个指定，要么 colum 中的元素相互重叠。

如果不能用网格实现，我该怎么做？

谢谢大家!

Answer 1

视觉上这可以通过 order 属性进行管理，但它不可扩展或动态。

main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 2em); /* number of rows is required - so not dynamic */
  grid-auto-flow: column;
}

.A {
  order: 1;
}

.B {
  order: 2;
}

.C {
  order: 3;
}

.D {
  order: 4;
}

<main>
  <div class="A">A_1</div>
  <div class="A">A_2</div>
  <div class="B">B_1</div>
  <div class="A">A_3</div>
  <div class="D">D_1</div>
  <div class="B">B_2</div>
  <div class="C">C_1</div>
  <div class="A">A_4</div>
  <div class="B">B_3</div>
  <div class="C">C_2</div>
  <div class="A">A_N</div>
  <div class="C">C_3</div>
  <div class="B">B_4</div>
  <div class="C">C_4</div>
  <div class="B">B_N</div>
  <div class="C">C_N</div>
  <div class="D">D_2</div>
  <div class="D">D_3</div>
  <div class="D">D_4</div>
  <div class="D">D_N</div>
</main>