gpt4 book ai didi

css - 我可以从上到下对网格元素进行排序,同时仍换行到下一列吗?

转载 作者:行者123 更新时间:2023-11-28 14:17:14 25 4
gpt4 key购买 nike

<分区>

我有未知数量的元素需要在网格中显示。我想要根据需要自动填充的列数,对行数没有限制。我可以让它正常工作:

.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
list-style: none;
}
<ul class="grid">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
</ul>

但是,我还希望元素按列的字母顺序排序:

a  d  g
b e h
c f

我知道我可以使用 grid-auto-flow: column 按列而不是按行放置每个元素,但如果我这样做,我只会得到一长行。

.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-flow: column;
list-style: none;
}
<ul class="grid">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
</ul>

如何保持第一个片段的行为,但从上到下而不是从左到右排序?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com