将 CSS 网格中的项目顺序从左向右更改为自上而下

Question

我正在系统中构建标签列表，这些标签应显示在三列的 CSS 网格中。所以，像这样：

<ul>
    <li>Alfa</li>
    <li>Bravo</li>
    <li>Charlie</li>
    <li>Delta</li>
    <li>Echo</li>
    <li>Foxtrot</li>
</ul>

ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

在浏览器中查看此内容时，项目的排序如下：

Alfa  Bravo Charlie
Delta Echo  Foxtrot

但是，我希望它们是这样订购的：

Alfa  Charlie Echo
Bravo Delta   Foxtrot

所以，基本上是从上到下排序，而不是从左到右。

有什么方法可以简单地做到这一点吗？我已经尝试过使用

:nth-child

选择器和

grid-column

，但这并不能真正达到我想要的效果。我可能可以用 Javascript 解决这个问题，但我想知道是否有纯 CSS 的解决方案。

Answer 1

我建议您为此使用列而不是网格列

ul{
  columns: 3
}

<ul>
    <li>Alfa</li>
    <li>Bravo</li>
    <li>Charlie</li>
    <li>Delta</li>
    <li>Echo</li>
    <li>Foxtrot</li>
</ul>

祝你有美好的一天！

Answer 2

我对此只做了简短的研究。

看起来

grid-auto-flow: column

（https://www.w3schools.com/cssref/pr_grid-auto-flow.php）可以满足您的要求。

Answer 3

你可以试试这个：

    <ul style="display: grid;
    grid-template-columns: 1fr 1fr 1fr;">
    <li>Alfa</li>
    <li style="grid-row: 2; grid-column: 1;">Bravo</li>
    <li style="grid-row: 1; grid-column: 2;">Charlie</li>
    <li style="grid-row: 2; grid-column: 2;">Delta</li>
    <li style="grid-row: 1; grid-column: 3;">Echo</li>
    <li style="grid-row: 2; grid-column: 3;">Foxtrot</li>
    </ul>

如果你想有一个单独的 CSS 页面，请为每个 li 指定一个特定的类名称，例如 li1、li2、li3 等，然后像我上面所做的那样设置它们的 CSS 属性。

例如：

li2{
grid-row:2;
grid-column:1
}