Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

目前，其输出为：

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网格布局按数字顺序

1 个答案: