Question

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

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

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

Answer 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

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

Answer 3

这听起来很适合网格自动流动。

grid-auto-flow：列;

CSS网格 - 逆序列/行，它可能吗？

3 个答案: