CSS网格 - 倒序列/行，可能吗？ [复制]答案

【问题标题】：CSS grid - reverse order column/rows, its possible? [duplicate]CSS网格 - 倒序列/行，可能吗？ [复制]
【发布时间】：2018-05-14 18:34:31
【问题描述】：

我正在玩 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;
}

链接：http://jsbin.com/mosijijewe/edit?html,css,output

预期结果是

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

等等

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

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

【问题讨论】：

谢谢链接，现在我明白了。
stackoverflow.com/q/47758544/3597276

标签： css grid css-grid

【解决方案1】：

如果您不介意将 css 规则设置为最大预期行数，则此技巧可以为您工作：

使用内容查询根据元素总数强制某些元素转到特定行

var numElements = 4;

function add () {
    var ul = document.querySelector("ul");
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(numElements));
    ul.appendChild(li);
    numElements++;
}

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

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

li:nth-child(2):nth-last-child(n + 3) {
	grid-row: 2;
	background: tomato;
}
li:nth-child(3):nth-last-child(n + 5) {
	grid-row: 3;
	background: tomato;
}
li:nth-child(4):nth-last-child(n + 7) {
	grid-row: 4;
	background: tomato;
}
li:nth-child(5):nth-last-child(n + 9) {
	grid-row: 5;
	background: tomato;
}
li:nth-child(6):nth-last-child(n + 11) {
	grid-row: 6;
	background: tomato;
}
li:nth-child(7):nth-last-child(n + 13) {
	grid-row: 7;
	background: tomato;
}
li:nth-child(8):nth-last-child(n + 15) {
	grid-row: 8;
	background: tomato;
}

li:nth-child(4):nth-last-child(1) {
	grid-row: 1;
	background: bisque;
}

<button onclick="add()">Add item</button>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>

数量查询参考：

a list apart

css tricks

online tool

【讨论】：

嗯，看起来不错！谢谢！
有点hacky，但我认为没有更好的方法。很高兴你喜欢它！
今天的网络到处都是javascript，没关系:-)，我喜欢你的第n个孩子和第n个孩子的组合，但想象它是如何工作的有点复杂（我必须学习这种方法）。
我添加了关于数量查询的参考资料，他们可以提供帮助:-)
谢谢，我会把它记在脑海里 :-)

【解决方案2】：

另一种选择可能是使用列数而不是网格：

ul
  {
    column-count: 3;
  }

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

演示：https://codepen.io/RuaScribe/pen/PoYEaEw

信息：https://css-tricks.com/almanac/properties/c/column-count/

【讨论】：

【解决方案3】：

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

网格自动流：列；

【讨论】：