CSS Grid - auto-flow-column下自动生成新行的功能失效。

Question

我有一个包含一些链接的CSS网格。这是一个三列网格，行数取决于项目数量。
最好让每列中的项目数量均匀分配。

列数和行数由以下代码设置：
grid-template-columns: repeat(3, 1fr); //将其变为三列宽度
grid-template-rows: repeat(auto-fill); //自动生成新的行

这很完美，除了当我尝试按列流动而不是行时：
grid-auto-flow: column; //这会破坏它。

Example:

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

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

- Jonny

---

你需要相同的行间距吗？ - s.kuznetsov

嘿，谢谢你的回答...理想情况下我会，但你有什么想法？ - Jonny

我指的是 grid-row-gap 规则。 - s.kuznetsov

那会有什么帮助吗？ 我对此没有偏好，可能是0... - Jonny

从你的问题中，我意识到你需要 grid-row-gap，因为它可以缩进某些行。但现在我不太明白你的问题是什么。 - s.kuznetsov

Answer 1

你不需要使用CSS网格布局，而是使用列：

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

- Temani Afif

---

只有当所有项目的高度相同时，才能起作用。 - user5670895