使用grid-auto-flow:column时如何拥有动态行？

Question

嗯，目前这是人类的问题，因为人工智能无法回答。看来它只是没有完全理解CSS网格机制。所以我在这里：

ul{
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  max-width: 888px;
  margin: 0 auto;
  grid-auto-rows: auto;
}

<ul>
  <li><a href="#">Aziende agricole</a></li>
  <li><a href="#">Dove mangiare</a></li>
  <li><a href="#">Dove dormire</a></li>
  <li><a href="#">Botteghe</a></li>
  <li><a href="#">La Molonara</a></li>
  <li><a href="#">I Stròdi</a></li>
  <li><a href="#">La Tèra crèa</a></li>
  <li><a href="#">Eventi</a></li>
  <li><a href="#">Didattica</a></li>
  <li><a href="#">Contatti</a></li>
</ul>

如您所见，它有效，但显然我必须定义固定的行数。如果我有更多元素，则会创建另一列而不是另一行。 除了使用

grid-auto-flow: row

之外，还有其他方法可以解决吗？我使用列是因为我需要该项目分布。

Answer 1

根据我的知识，网格行仅在我们指定固定高度时才起作用。您可以删除 grid-auto-flow : columns 以便即使在元素增加时也能保持三列