CSS grid - reverse order column/rows, its possible?

Question

im playing with css 3 grid and i have one question. I created 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

Expected result is

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

etc.

My question: is possible to get with some grid value or some trick example below? (without some manual definition, because I do not know how many lines will be in advance)

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

Thx for link, now I understand. – Mr. RJ May 14 '18 at 19:41 — Mr. RJ, May 14 '18 at 19:41
https://stackoverflow.com/q/47758544/3597276 – Michael Benjamin May 16 '18 at 15:30 — Michael Benjamin, May 16 '18 at 15:30

vals · Answer 1 · 2018-05-17T08:51:09.793

3

If you don't mind setting as many css rules as the maximum expected number of rows, this trick can work for you:

Use a content query to force some elements, based in the total number of elements, to go to a specific row

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>

References for quantity queries:

a list apart

css tricks

online tool

edited May 17 '18 at 08:51

answered May 15 '18 at 21:07

vals

61,425
11
89
138

Hmm, looks good! Thank you! – Mr. RJ May 16 '18 at 18:51
1

A little bit hacky, but I think that there is no better way. Happy that you like it ! – vals May 16 '18 at 20:18
Today web is a full of javascript, it doesnt matter :-), i like your nth-child with nth last child combination, but it's a little complicated to imagine how it works (i have to study this approach). – Mr. RJ May 17 '18 at 08:29
I have added references about quantity queries, they can help :-) – vals May 17 '18 at 08:51
thx, I wil put it into my head :-) – Mr. RJ May 17 '18 at 13:11
@Mr.Rj: "*[Today's] web is full of [JavaScript], it doesnt matter*" - oh it matters. We shouldn't need to solve this simple use-case with a an overly-heavy CSS file or with JavaScript. I'm genuinely surprised this isn't already in the spec (here's hoping it makes it into level 2). – David Thomas Jul 26 '19 at 13:29

score 1 · Answer 2 · answered Sep 06 '19 at 11:09

Another option might be to use column-count rather than grid:

ul
  {
    column-count: 3;
  }

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

demo: https://codepen.io/RuaScribe/pen/PoYEaEw

info: https://css-tricks.com/almanac/properties/c/column-count/

score -1 · Answer 3 · answered Oct 10 '19 at 05:24

-1

This sounds like a great use for grid-auto-flow.

grid-auto-flow: column;

answered Oct 10 '19 at 05:24

Victoria

497
2
10
20

CSS grid - reverse order column/rows, its possible?

3 Answers3