html - CSS Grid - 在自动流列上自动生成新的行中断

Question

我有一个包含一些链接的 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>

如何在我的网格中保留三列，使其按列而不是行流动，并让它在需要时自动生成这些行？

Answer 1

您不需要 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>