使用css网格按类对列中的项目进行排序

我试图通过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>

有办法做到这一点吗？我尝试过使用网格模板区域，但要么我必须逐个指定，要么列中的项目彼此重叠

如果网格无法实现，我该怎么做

---

谢谢大家

可视化这可以通过

order

属性进行管理，但它不可扩展或动态

main{
显示：网格；
网格模板列：重复（4，1fr）；
网格模板行：重复（5，2em）；/*需要行数-因此不是动态的*/
网格自动流：列；
}
.A{
顺序：1；
}
.B{
顺序：2；
}
C{
顺序：3；
}
博士{
顺序：4；
}

A_1
A_2
B_1
A_3
D_1
B_2
C_1
A_4
B_3
C_2
A\N
C_3
B_4
C_4
布恩
库恩
D_2
D_3
D_4
迪恩

如果您使用flexbox构建网格，并且A、A_1、A_2、A_3项在返回时都是有序的（这意味着您不必在它们自己的类中对它们进行排序），我相信您可以对这些项使用

order

属性。您必须将父级上的

flex direction

属性设置为“column”

我扔了一个快速代码笔给你看，一旦你这样做，这些都会被分类。从这里开始，您需要决定如何设置包含项的样式，并使网格系统在最后一项处中断

---

Css是一种样式语言，据我所知，它无法排序-您可以按预定义的方式排序，但不能排序。您只能通过使用一个粗糙的Css来近似这一点，而这可以从理论上回答问题，将答案的基本部分包含在此处，并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能无效

-------------------------
|  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 |
-------------------------