CSS 按数字顺序排列的网格布局

Question

我正在使用 CSS 网格进行布局。基本上我想要做的是让项目显示为网格，但按数字顺序排列。举个例子：

.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>

目前，这个输出是：

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

我想要的时候：

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

有没有办法用 CSS 网格做到这一点？

Answer 1

将grid-template-columns更改为：

grid-template-rows: auto auto auto;

然后添加这个样式：

grid-auto-flow: column;

片段：

.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>

CSS 按数字顺序排列的网格布局

CSS grid layout in a numerical order

html

css

css-grid