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

huangapple
go评论113阅读模式
英文:

Changing the order of items in a CSS grid from left-right to top-down

问题

  1. 我正在建立一个标签列表的系统，并且这些标签应该在CSS网格中以三列显示。所以，类似这样的：
  3. ```html
  4. <ul>
  5.     <li>Alfa</li>
  6.     <li>Bravo</li>
  7.     <li>Charlie</li>
  8.     <li>Delta</li>
  9.     <li>Echo</li>
  10.     <li>Foxtrot</li>
  11. </ul>
  1. ul {
  2.     display: grid;
  3.     grid-template-columns: 1fr 1fr 1fr;
  4. }

在浏览器中查看时，项目的顺序如下：

  1. Alfa  Bravo Charlie
  2. Delta Echo  Foxtrot

然而，我想要它们按照这样的顺序排列：

  1. Alfa  Charlie Echo
  2. Bravo Delta   Foxtrot

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

有没有简单的方法来实现这个？我已经尝试过一些:nth-child选择器和grid-column，但那不是我想要的。我可能可以用Javascript解决这个问题，但我想知道是否有纯CSS的解决方案。

  2. <details>
  3. <summary>英文:</summary>
  5. 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:
  7. ```html
  8. &lt;ul&gt;
  9.     &lt;li&gt;Alfa&lt;/li&gt;
  10.     &lt;li&gt;Bravo&lt;/li&gt;
  11.     &lt;li&gt;Charlie&lt;/li&gt;
  12.     &lt;li&gt;Delta&lt;/li&gt;
  13.     &lt;li&gt;Echo&lt;/li&gt;
  14.     &lt;li&gt;Foxtrot&lt;/li&gt;
  15. &lt;/ul&gt;
  1. ul {
  2.     display: grid;
  3.     grid-template-columns: 1fr 1fr 1fr;
  4. }

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

  1. Alfa  Bravo Charlie
  2. Delta Echo  Foxtrot

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

  1. Alfa  Charlie Echo
  2. 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"。

  1. ul {
  2.   columns: 3;
  3. }
  1. <ul>
  2.   <li>Alfa</li>
  3.   <li>Bravo</li>
  4.   <li>Charlie</li>
  5.   <li>Delta</li>
  6.   <li>Echo</li>
  7.   <li>Foxtrot</li>
  8. </ul>

祝您有美好的一天！

英文:

I would recommend that you use columns instead of grid columns for this

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. ul{
  2.   columns: 3
  3. }

<!-- language: lang-html -->

  1. &lt;ul&gt;
  2.     &lt;li&gt;Alfa&lt;/li&gt;
  3.     &lt;li&gt;Bravo&lt;/li&gt;
  4.     &lt;li&gt;Charlie&lt;/li&gt;
  5.     &lt;li&gt;Delta&lt;/li&gt;
  6.     &lt;li&gt;Echo&lt;/li&gt;
  7.     &lt;li&gt;Foxtrot&lt;/li&gt;
  8. &lt;/ul&gt;

<!-- end snippet -->

Have a great day!

答案2

得分: 0

我只进行了简短的研究。

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

英文:

I did only a short research on this.

It seems like grid-auto-flow: column (https://www.w3schools.com/cssref/pr_grid-auto-flow.php) does what you want.

答案3

得分: 0

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

  1. <ul style="display: grid;
  2. grid-template-columns: 1fr 1fr 1fr;">
  3. <li>Alfa</li>
  4. <li style="grid-row: 2; grid-column: 1;">Bravo</li>
  5. <li style="grid-row: 1; grid-column: 2;">Charlie</li>
  6. <li style="grid-row: 2; grid-column: 2;">Delta</li>
  7. <li style="grid-row: 1; grid-column: 3;">Echo</li>
  8. <li style="grid-row: 2; grid-column: 3;">Foxtrot</li>
  9. </ul>

如果你想要在一个独立的CSS页面中为每个li元素赋予特定的类名，如li1、li2、li3等，然后按照我上面所做的方式设置它们的CSS属性，示例代码如下：

  1. li2 {
  2.     grid-row: 2;
  3.     grid-column: 1;
  4. }

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

英文:

you can try this:

  1.     &lt;ul style=&quot;display: grid;
  2.     grid-template-columns: 1fr 1fr 1fr;&quot;&gt;
  3.     &lt;li&gt;Alfa&lt;/li&gt;
  4.     &lt;li style=&quot;grid-row: 2; grid-column: 1;&quot;&gt;Bravo&lt;/li&gt;
  5.     &lt;li style=&quot;grid-row: 1; grid-column: 2;&quot;&gt;Charlie&lt;/li&gt;
  6.     &lt;li style=&quot;grid-row: 2; grid-column: 2;&quot;&gt;Delta&lt;/li&gt;
  7.     &lt;li style=&quot;grid-row: 1; grid-column: 3;&quot;&gt;Echo&lt;/li&gt;
  8.     &lt;li style=&quot;grid-row: 2; grid-column: 3;&quot;&gt;Foxtrot&lt;/li&gt;
  9.     &lt;/ul&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.

for example:

  1. li2{
  2. grid-row:2;
  3. grid-column:1
  4. }

with grid-row and grid-column you can order your items in any direction you want.

huangapple
  • 本文由 发表于 2023年8月10日 20:45:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/76875861.html
  • css
  • css-grid
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定