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>