定义 CSS 网格中的行数答案

【问题标题】：Defining the number of rows in CSS grids定义 CSS 网格中的行数
【发布时间】：2020-01-21 18:16:30
【问题描述】：

我有一个假设性的问题：

如果我有一个<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 解决方法 - 似乎有点太不灵活，没有选项自动化这个，我是网格新手，只是在弄清楚它是如何工作的。

【问题讨论】：

标签： html css css-grid

【解决方案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

【讨论】：

谢谢 - 这就是我所追求的 - 我认为这个属性仅用于调整每一行的大小。它按我的预期工作，谢谢。
@Jonny 我认为这个属性仅用于调整每一行的大小它确实是为了这个目的，如果你让所有行都具有相同的大小，就像你让你 N 行具有相同的大小，因此无论行数如何，它们都将具有相同的大小

【解决方案2】：

只需尝试 (grid-template-columns) 属性与自动填充和 minmax（你想给一个项目的最小尺寸，你想给一个项目的最大尺寸），使用 fr(fraction) 来给出最大尺寸来获得有效地响应网格。并添加重复以自动应用此属性。

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

【讨论】：