51工具盒子英文:
Changing the order of items in a CSS grid from left-right to top-down
问题 {#heading}
我正在建立一个标签列表的系统，并且这些标签应该在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;
}
</code></pre>
<p>在浏览器中查看时，项目的顺序如下：</p>
<pre><code>Alfa Bravo Charlie
Delta Echo Foxtrot
</code></pre>
<p>然而，我想要它们按照这样的顺序排列：</p>
<pre><code>Alfa Charlie Echo
Bravo Delta Foxtrot
</code></pre>
<p>所以，基本上是从上到下排序，而不是从左到右。</p>
<p>有没有简单的方法来实现这个？我已经尝试过一些<code>:nth-child</code>选择器和<code>grid-column</code>，但那不是我想要的。我可能可以用Javascript解决这个问题，但我想知道是否有纯CSS的解决方案。</p>
<pre><code><details>
<summary>英文:</summary>
I&amp;#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:
&amp;amp;lt;ul&amp;amp;gt;
&amp;amp;lt;li&amp;amp;gt;Alfa&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;li&amp;amp;gt;Bravo&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;li&amp;amp;gt;Charlie&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;li&amp;amp;gt;Delta&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;li&amp;amp;gt;Echo&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;li&amp;amp;gt;Foxtrot&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;/ul&amp;amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;pre tabindex=&quot;0&quot; style=&quot;color:#f8f8f2;background-color:#272822;&quot;&gt;&lt;code&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;ul&lt;/span&gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt; &lt;span style=&quot;color:#66d9ef&quot;&gt;display&lt;/span&gt;: &lt;span style=&quot;color:#66d9ef&quot;&gt;grid&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt; &lt;span style=&quot;color:#66d9ef&quot;&gt;grid-template-columns&lt;/span&gt;: &lt;span style=&quot;color:#ae81ff&quot;&gt;1&lt;/span&gt;fr &lt;span style=&quot;color:#ae81ff&quot;&gt;1&lt;/span&gt;fr &lt;span style=&quot;color:#ae81ff&quot;&gt;1&lt;/span&gt;fr;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;When viewing this in a browser, the items are ordered like this:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;Alfa Bravo Charlie
Delta Echo Foxtrot
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;However, i would like them to be ordered like this:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;Alfa Charlie Echo
Bravo Delta Foxtrot
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;So, basically ordered from top to bottom instead of left-right.&lt;/p&gt;
&lt;p&gt;Is there any way to do this in a simple way? I already experimented a bit with &lt;code&gt;:nth-child&lt;/code&gt; selectors and &lt;code&gt;grid-column&lt;/code&gt;, 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.&lt;/p&gt;
&lt;h1 id=&quot;1&quot;&gt;答案1&lt;/h1&gt;
&lt;p&gt;&lt;strong&gt;得分&lt;/strong&gt;: 2&lt;/p&gt;
&lt;p&gt;我建议您在这里使用&quot;columns&quot;而不是&quot;grid columns&quot;。&lt;/p&gt;
&lt;pre tabindex=&quot;0&quot; style=&quot;color:#f8f8f2;background-color:#272822;&quot;&gt;&lt;code&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;ul&lt;/span&gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt; &lt;span style=&quot;color:#66d9ef&quot;&gt;columns&lt;/span&gt;: &lt;span style=&quot;color:#ae81ff&quot;&gt;3&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;pre tabindex=&quot;0&quot; style=&quot;color:#f8f8f2;background-color:#272822;&quot;&gt;&lt;code&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;&amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;ul&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt; &amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;Alfa&amp;lt;/&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt; &amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;Bravo&amp;lt;/&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt; &amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;Charlie&amp;lt;/&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt; &amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;Delta&amp;lt;/&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt; &amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;Echo&amp;lt;/&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt; &amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;Foxtrot&amp;lt;/&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;&amp;lt;/&lt;span style=&quot;color:#f92672&quot;&gt;ul&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;祝您有美好的一天！&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;英文:&lt;/summary&gt;
&lt;p&gt;I would recommend that you use columns instead of grid columns for this&lt;/p&gt;
&lt;p&gt;&amp;lt;!-- begin snippet: js hide: false console: true babel: false --&amp;gt;&lt;/p&gt;
&lt;p&gt;&amp;lt;!-- language: lang-css --&amp;gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;ul{
columns: 3
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&amp;lt;!-- language: lang-html --&amp;gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;amp;lt;ul&amp;amp;gt;
&amp;amp;lt;li&amp;amp;gt;Alfa&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;li&amp;amp;gt;Bravo&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;li&amp;amp;gt;Charlie&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;li&amp;amp;gt;Delta&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;li&amp;amp;gt;Echo&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;li&amp;amp;gt;Foxtrot&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;/ul&amp;amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&amp;lt;!-- end snippet --&amp;gt;&lt;/p&gt;
&lt;p&gt;Have a great day!&lt;/p&gt;
&lt;/details&gt;
&lt;h1 id=&quot;2&quot;&gt;答案2&lt;/h1&gt;
&lt;p&gt;&lt;strong&gt;得分&lt;/strong&gt;: 0&lt;/p&gt;
&lt;p&gt;我只进行了简短的研究。&lt;/p&gt;
&lt;p&gt;似乎&lt;code&gt;grid-auto-flow: column&lt;/code&gt;（&lt;a href=&quot;https://www.w3schools.com/cssref/pr_grid-auto-flow.php&quot; rel=&quot;external nofollow&quot; target=&quot;_blank&quot;&gt;链接&lt;/a&gt;）可以实现你想要的效果。&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;英文:&lt;/summary&gt;
&lt;p&gt;I did only a short research on this.&lt;/p&gt;
&lt;p&gt;It seems like &lt;code&gt;grid-auto-flow: column&lt;/code&gt; (&lt;a href=&quot;https://www.w3schools.com/cssref/pr_grid-auto-flow.php&quot; rel=&quot;external nofollow&quot; target=&quot;_blank&quot;&gt;https://www.w3schools.com/cssref/pr_grid-auto-flow.php&lt;/a&gt;) does what you want.&lt;/p&gt;
&lt;/details&gt;
&lt;h1 id=&quot;3&quot;&gt;答案3&lt;/h1&gt;
&lt;p&gt;&lt;strong&gt;得分&lt;/strong&gt;: 0&lt;/p&gt;
&lt;p&gt;以下是翻译好的代码部分：&lt;/p&gt;
&lt;pre tabindex=&quot;0&quot; style=&quot;color:#f8f8f2;background-color:#272822;&quot;&gt;&lt;code&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;&amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;ul&lt;/span&gt; &lt;span style=&quot;color:#a6e22e&quot;&gt;style&lt;/span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#e6db74&quot;&gt;&quot;display: grid;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;&lt;span style=&quot;color:#e6db74&quot;&gt;grid-template-columns: 1fr 1fr 1fr;&quot;&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;&amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;Alfa&amp;lt;/&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;&amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt; &lt;span style=&quot;color:#a6e22e&quot;&gt;style&lt;/span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#e6db74&quot;&gt;&quot;grid-row: 2; grid-column: 1;&quot;&lt;/span&gt;&amp;gt;Bravo&amp;lt;/&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;&amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt; &lt;span style=&quot;color:#a6e22e&quot;&gt;style&lt;/span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#e6db74&quot;&gt;&quot;grid-row: 1; grid-column: 2;&quot;&lt;/span&gt;&amp;gt;Charlie&amp;lt;/&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;&amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt; &lt;span style=&quot;color:#a6e22e&quot;&gt;style&lt;/span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#e6db74&quot;&gt;&quot;grid-row: 2; grid-column: 2;&quot;&lt;/span&gt;&amp;gt;Delta&amp;lt;/&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;&amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt; &lt;span style=&quot;color:#a6e22e&quot;&gt;style&lt;/span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#e6db74&quot;&gt;&quot;grid-row: 1; grid-column: 3;&quot;&lt;/span&gt;&amp;gt;Echo&amp;lt;/&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;&amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt; &lt;span style=&quot;color:#a6e22e&quot;&gt;style&lt;/span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#e6db74&quot;&gt;&quot;grid-row: 2; grid-column: 3;&quot;&lt;/span&gt;&amp;gt;Foxtrot&amp;lt;/&lt;span style=&quot;color:#f92672&quot;&gt;li&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;&amp;lt;/&lt;span style=&quot;color:#f92672&quot;&gt;ul&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;如果你想要在一个独立的CSS页面中为每个&lt;code&gt;li&lt;/code&gt;元素赋予特定的类名，如&lt;code&gt;li1&lt;/code&gt;、&lt;code&gt;li2&lt;/code&gt;、&lt;code&gt;li3&lt;/code&gt;等，然后按照我上面所做的方式设置它们的CSS属性，示例代码如下：&lt;/p&gt;
&lt;pre tabindex=&quot;0&quot; style=&quot;color:#f8f8f2;background-color:#272822;&quot;&gt;&lt;code&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;li2&lt;/span&gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt; &lt;span style=&quot;color:#66d9ef&quot;&gt;grid-row&lt;/span&gt;: &lt;span style=&quot;color:#ae81ff&quot;&gt;2&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt; &lt;span style=&quot;color:#66d9ef&quot;&gt;grid-column&lt;/span&gt;: &lt;span style=&quot;color:#ae81ff&quot;&gt;1&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;使用&lt;code&gt;grid-row&lt;/code&gt;和&lt;code&gt;grid-column&lt;/code&gt;属性，你可以按照你想要的任何方向排列你的项目。&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;英文:&lt;/summary&gt;
&lt;p&gt;you can try this:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt; &amp;amp;lt;ul style=&amp;amp;quot;display: grid;
grid-template-columns: 1fr 1fr 1fr;&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;li&amp;amp;gt;Alfa&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;li style=&amp;amp;quot;grid-row: 2; grid-column: 1;&amp;amp;quot;&amp;amp;gt;Bravo&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;li style=&amp;amp;quot;grid-row: 1; grid-column: 2;&amp;amp;quot;&amp;amp;gt;Charlie&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;li style=&amp;amp;quot;grid-row: 2; grid-column: 2;&amp;amp;quot;&amp;amp;gt;Delta&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;li style=&amp;amp;quot;grid-row: 1; grid-column: 3;&amp;amp;quot;&amp;amp;gt;Echo&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;li style=&amp;amp;quot;grid-row: 2; grid-column: 3;&amp;amp;quot;&amp;amp;gt;Foxtrot&amp;amp;lt;/li&amp;amp;gt;
&amp;amp;lt;/ul&amp;amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;if you want to have a separate CSS page give each li a specific class name like li1, li2, li3 and so on, and then set their CSS property to them as I have done above.&lt;/p&gt;
&lt;p&gt;for example:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;li2{
grid-row:2;
grid-column:1
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;with grid-row and grid-column you can order your items in any direction you want.&lt;/p&gt;
&lt;/details&gt;
&lt;p&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<p></code></pre></p>
