我有一个包含一些链接的 CSS 网格。
它是一个三列网格，具有任意数量的行(取决于元素的数量)。
我希望最好在每列中平均分配元素数。
列数和行数由以下设置:
grid-template-columns: repeat(3, 1fr);//让它变成三列宽
grid-template-rows: repeat(auto-fill);//自动生成新行
这非常有效，除非我试图让网格按列流动，而不是按行流动:
grid-auto-flow: column;//这打破了它
例子:
.container {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(auto-fill);
/*grid-auto-flow: column;*/
}
a {
height: 50px;
}<div class="container">
<a href="#">item one</a>
<a href="#">item two</a>
<a href="#">item three</a>
<a href="#">item four</a>
<a href="#">item fuve</a>
<a href="#">item six</a>
<a href="#">item seven</a>
<a href="#">item eight</a>
<a href="#">item nine</a>
<a href="#">item ten</a>
<a href="#">item eleven</a>
<a href="#">item twelve</a>
<a href="#">item thirteen</a>
<a href="#">item fourteen</a>
<a href="#">item fifteen</a>
</div>如何在我的网格中保留三列，使其按列而不是行流动，并让它在需要时自动生成这些行？
最佳答案
您不需要 CSS 网格，但需要 columns :
.container {
column-count:3;
}
a {
height: 50px;
display:block;
}<div class="container">
<a href="#">item one</a>
<a href="#">item two</a>
<a href="#">item three</a>
<a href="#">item four</a>
<a href="#">item fuve</a>
<a href="#">item six</a>
<a href="#">item seven</a>
<a href="#">item eight</a>
<a href="#">item nine</a>
<a href="#">item ten</a>
<a href="#">item eleven</a>
<a href="#">item twelve</a>
<a href="#">item thirteen</a>
<a href="#">item fourteen</a>
<a href="#">item fifteen</a>
</div>https://stackoverflow.com/questions/63619214/
相关文章：
mongodb - Azure cosmosDB : Getting error on sortin
html - 与 flex-grow 一起使用的宽度属性的影响？
linux - 安装包 : installed grub-efi-amd64 package pos
visual-studio - error : The imported project was n
javascript - 如果导航到 React Native 中的其他屏幕，如何保留 formik
php - 如何使用 line bot webhook 请求在线路组中使用 @mention/@ta
python - (-212 :Parsing error) in Object Detection