问题

我正在建立一个标签列表的系统，并且这些标签应该在CSS网格中以三列显示。所以，类似这样的：

```html
<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的解决方案。

<details>
<summary>英文:</summary>

I&#39;m building a list of tags in a system, and those tags should be displayed in a CSS grid with three columns. So, something like this:

```html
&lt;ul&gt;
    &lt;li&gt;Alfa&lt;/li&gt;
    &lt;li&gt;Bravo&lt;/li&gt;
    &lt;li&gt;Charlie&lt;/li&gt;
    &lt;li&gt;Delta&lt;/li&gt;
    &lt;li&gt;Echo&lt;/li&gt;
    &lt;li&gt;Foxtrot&lt;/li&gt;
&lt;/ul&gt;

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

When viewing this in a browser, the items are ordered like this:

Alfa  Bravo Charlie
Delta Echo  Foxtrot

However, i would like them to be ordered like this:

Alfa  Charlie Echo
Bravo Delta   Foxtrot

So, basically ordered from top to bottom instead of left-right.

Is there any way to do this in a simple way? I already experimented a bit with :nth-child selectors and grid-column, but that doesn't really do what i want. I could probably solve this with Javascript, but i like to know if there's a CSS-only solution.

答案1

得分: 2

我建议您在这里使用"columns"而不是"grid columns"。

ul {
  columns: 3;
}

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

祝您有美好的一天！

ul{
  columns: 3
}

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

答案2

得分: 0

我只进行了简短的研究。

似乎grid-auto-flow: column（链接）可以实现你想要的效果。

答案3

得分: 0

以下是翻译好的代码部分：

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

使用grid-row和grid-column属性，你可以按照你想要的任何方向排列你的项目。

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

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