CSS grid layout in digital order

Question

I use CSS mesh for layout. Basically, I want the elements to appear as a grid, but in order of numbers. Example:

.list ul {
    display: grid;
    grid-template-columns: auto auto auto;
    list-style-type: none;
    font-size: 20px;
}

.list li {
    padding-bottom: 20px;
}

<div class="list">
     <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>
     </ul>
</div>

Run codeHide result

Currently, the conclusion is:

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

When I want:

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

Is there a way to do this using CSS mesh?

Answer 1

Change grid-template-columnsto:

grid-template-rows: auto auto auto;

Then add this style:

grid-auto-flow: column;

Excerpt:

.list ul {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-auto-flow: column;
    list-style-type: none;
    font-size: 20px;
}

.list li {
    padding-bottom: 20px;
}

<div class="list">
     <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>
     </ul>
</div>

Run codeHide result