CSS网格-列/行顺序颠倒，可能吗？

我在玩css 3网格，我有一个问题。 我创建了演示：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>

</ul>


ul
{
    border: 3px solid goldenrod;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 50px;
    margin: 0;
    padding: 0;
    grid-gap: 10px;

}

li
{
    background: pink;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
    line-height: 50px;
}

等等

我的问题是：是否有可能获得一些网格值或下面的一些技巧示例？（没有一些手动定义，因为我不知道将提前多少行）

---

如果您不介意设置尽可能多的css规则作为最大预期行数，则此技巧适用于您：

使用内容查询强制某些元素（基于元素总数）转到特定行

var numElements=4；
函数添加（）{
var ul=文件查询选择器（“ul”）；
var li=document.createElement（“li”）；
li.appendChild（document.createTextNode（numElements））；
ul.儿童（li）；
numElements++；
}

ul{
边框：3件实心黄花；
显示：网格；
网格模板列：重复（3，1fr）；
网格自动行：50px；
保证金：0；
填充：0；
栅隙：10px；
宽度：300px；
网格自动流：列；
}
李{
背景：粉红色；
保证金：0；
填充：0；
列表样式：无；
文本对齐：居中；
线高：50px；
}
李：第n个孩子（2）：第n个最后一个孩子（n+3）{
网格行：2；
背景：番茄；
}
李：第n个孩子（3）：第n个最后一个孩子（n+5）{
网格行：3；
背景：番茄；
}
李：第n个孩子（4）：第n个最后一个孩子（n+7）{
网格行：4；
背景：番茄；
}
李：第n个孩子（5）：第n个最后一个孩子（n+9）{
网格行：5；
背景：番茄；
}
李：第n个孩子（6）：第n个最后一个孩子（n+11）{
网格行：6；
背景：番茄；
}
李：第n个孩子（7）：第n个最后一个孩子（n+13）{
网格行：7；
背景：番茄；
}
李：第n个孩子（8）：第n个最后一个孩子（n+15）{
网格行：8；
背景：番茄；
}
李：第n个孩子（4）：第n个最后一个孩子（1）{
网格行：1；
背景：bisque；
}

添加项目

一,
二,
三,

另一个选项可能是使用列计数而不是网格：

ul
  {
    column-count: 3;
  }

li
  {
    background: lightslategray;
    list-style: none;
    text-align: center;
    line-height: 50px;
    margin-bottom: 5px;
  }

演示：

---

信息：

这听起来像是网格自动流的一个很好的用途

---

网格自动流：列

Thx的链接，现在我明白了。嗯，看起来不错！非常感谢。有点不对劲，但我认为没有更好的办法了。很高兴你喜欢它！今天的web充满了javascript，这不重要：-），我喜欢你的第n个孩子和第n个最后一个孩子的组合，但想象它是如何工作的有点复杂（我必须学习这种方法）。我添加了关于数量查询的参考，它们可以帮助：-）thx，我将把它放到我的脑海中：-）

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

ul
  {
    column-count: 3;
  }

li
  {
    background: lightslategray;
    list-style: none;
    text-align: center;
    line-height: 50px;
    margin-bottom: 5px;
  }