Question 227198 in CSS Question posted in
Some basic documentation can be found here.

Changing the order of items in a CSS grid from left-right to top-down

I’m building a list of tags in a system, and those tags should be displayed in a CSS grid with three columns. So, something like this:

<ul>
    <li>Alfa</li>
    <li>Bravo</li>
    <li>Charlie</li>
    <li>Delta</li>
    <li>Echo</li>
    <li>Foxtrot</li>
</ul>

ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

When viewing this in a browser, the items are ordered like this:

Alfa  Bravo Charlie
Delta Echo  Foxtrot

However, i would like them to be ordered like this:

Alfa  Charlie Echo
Bravo Delta   Foxtrot

So, basically ordered from top to bottom instead of left-right.

Is there any way to do this in a simple way? I already experimented a bit with :nth-child selectors and grid-column, but that doesn’t really do what i want. I could probably solve this with Javascript, but i like to know if there’s a CSS-only solution.

Tags:

3

Answers


  1. 0

    I did only a short research on this.

    It seems like grid-auto-flow: column (https://www.w3schools.com/cssref/pr_grid-auto-flow.php) does what you want.

    Login or Signup to reply.
  2. 0

    I would recommend that you use columns instead of grid columns for this

    ul{
  columns: 3
}
    <ul>
    <li>Alfa</li>
    <li>Bravo</li>
    <li>Charlie</li>
    <li>Delta</li>
    <li>Echo</li>
    <li>Foxtrot</li>
</ul>

    Have a great day!

    Login or Signup to reply.
  3. 0

    you can try this:

        <ul style="display: grid;
    grid-template-columns: 1fr 1fr 1fr;">
    <li>Alfa</li>
    <li style="grid-row: 2; grid-column: 1;">Bravo</li>
    <li style="grid-row: 1; grid-column: 2;">Charlie</li>
    <li style="grid-row: 2; grid-column: 2;">Delta</li>
    <li style="grid-row: 1; grid-column: 3;">Echo</li>
    <li style="grid-row: 2; grid-column: 3;">Foxtrot</li>
    </ul>

    if you want to have a separate CSS page give each li a specific class name like li1, li2, li3 and so on, and then set their CSS property to them as I have done above.

    for example:

    li2{
grid-row:2;
grid-column:1
}

    with grid-row and grid-column you can order your items in any direction you want.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search