CSS grid - столбцы / строки в обратном порядке, возможно - PullRequest
Новая
       10

CSS grid - столбцы / строки в обратном порядке, возможно

0 голосов
/ 14 мая 2018

Я играю с сеткой 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

1 Ответ

0 голосов
/ 16 мая 2018

Если вы не возражаете установить столько правил 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>

Ссылки на количественные запросы:

список отдельно

трюки css

онлайн-инструмент

...