Html 使用CSS网格或Flexbox在垂直列中排序项目？

是否有一种CSS唯一的方法可以在不使用像素值的情况下对网格布局的列中的项进行排序？Flexbox也可以工作。我需要相同的HTML来启用以下两种场景（动态生成的HTML中的列数介于1和5之间）：

案例A：

| item 1          | item 2          | item 3          |
| item 4          | item 5          | item 6          |
| item 7          | item 8          | item 9          |

案例B：

| item 1          | item 4          | item 7          |
| item 2          | item 5          | item 8          |
| item 3          | item 6          | item 9          |

案例A很简单，只需做如下操作：

.case-a[data-column-count='3'] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

<div data-column-count="3" class="case-b">
     <label>item 1</label>
     <label>item 2</label>
     <label>item 3</label>
</div>

标签
标签
标签
标签
标签
标签
标签

您可以使用CSS的网格模板区域执行此操作

代码如下所示。其中，栅格模板区域表示放置。在元素的每个id中定义命名区域<代码>网格区域：a。每个元素的id选择器不需要与我的示例中的网格名称匹配

*{
框大小：边框框；
}
.包装纸{
颜色：白色；
字号：2em；
显示：网格；
网格模板列：重复（3，1fr）；
网格模板行：100px 100px 100px；
网格模板区域：
“a d g”
“b e h”
“c f i”；
}
#a{
背景色：rgb（180247182）；
网格面积：a；
}
#b{
背景色：rgb（250235122）；
网格面积：b；
}
#c{
背景色：rgb（167255250）；
网格面积：c；
}
#d{
背景色：rgb（227176252）；
网格面积：d；
}
#e{
背景色：rgb（157255205）；
网格面积：e；
}
#f{
背景色：rgb（243152,98）；
网格面积：f；
}
#g{
背景色：rgb（55,32199）；
网格面积：g；
}
#h{
背景色：rgb（120152,98）；
网格面积：h；
}
#我{
背景色：rgb（243100,98）；
网格面积：i；
}
.wrapper>div{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

1.
2.
3.
4.
5.
6.
7.
8.
9

由于某些原因，我无法加载代码笔。这是chrome的一个问题@NickLeePlease不要使用外部代码站点。相反，使用StackOverflow代码段功能，除非您需要那些没有提供的功能。@connexo我同意您的意见，但我认为最好同时包含这两种功能。所以移动应用程序不支持代码片段（看起来他们也不打算这么做）@soulshined这就是为什么我添加了代码片段，除非你需要那些不提供的功能。这里不是这样，很好。虽然这意味着我需要提前知道项目的数量（至少能够生成网格区域的名称（我没有-项目将由我正在构建的组件的用户编辑）。理论上，我可以到达一个我可以获得这些项目的地方。感谢这一试探性的调查方向！