html - 定义 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>

If a grid item is positioned into a row or column that is not explicitly sized by grid-template-rows or grid-template-columns, implicit grid tracks are created to hold it. This can happen either by explicitly positioning into a row or column that is out of range, or by the auto-placement algorithm creating additional rows or columns. The grid-auto-columns and grid-auto-rows properties specify the size of such implicitly-created tracks. ^ref