定义CSS网格中的行数

Question

我有一个稍微假设的问题：

[如果我有一个<ul>，并且我想使用CSS网格在垂直列表中显示<li>，那么有一种方法可以自动执行此操作，因此，如果<li>的数量发生了变化，行会自动增加/减少吗？

示例：

ul {
  display: grid;
  grid-template-rows: repeat(NUM, 1fr);
}

<ul>
  <li>item one</li>
  <li>item two</li>
  <li>item three</li>
</ul>

这里NUM指定模板中的行数，但是如果我要添加另一个<li>，则必须去更改NUM值。

是否有办法识别子元素的数量并相应地自动设置行数？

我假设是在错过任何cdd网格规范的情况下询问--我不是在寻找任何黑客手段，尤其是不是在寻找JavaScript解决方法-似乎有点不灵活，无法选择自动化这，我是网格的新手，只是想知道它是如何工作的。

Answer 1

只需定义grid-auto-rows，而您无需知道项目数

ul {
  display: grid;
  grid-auto-rows:1fr;
  margin:10px;
  padding:0;
}
ul li {
  border:1px solid;
  list-style-type:none;
}

<ul>
  <li>item <br>one</li>
  <li>item two</li>
  <li>item three</li>
</ul>

<ul>
  <li>item <br>one</li>
  <li>item two</li>
  <li>item three</li>
  <li>item two</li>
  <li>item three</li>
</ul>

<ul>
  <li>item <br>one</li>
  <li>item two</li>
</ul>

如果将网格项目放置在未由grid-template-rows或grid-template-columns明确指定大小的行或列中，则会创建隐式网格轨迹来保存它。这可以通过显式定位到超出范围的行或列中，也可以通过自动放置算法创建其他行或列来发生。 grid-auto-columns和grid-auto-rows属性指定这种隐式创建的轨道的大小。 ^ref

Answer 2

只需尝试使用自动填充和minmax（要提供一项的最小尺寸，要提供一项的最大尺寸）的属性（grid-template-columns）属性，然后使用fr（fraction）给出要响应的最大尺寸有效的网格。并添加重复以自动应用此属性。

ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  }