CSS grid-auto-rows属性技术问询：行数生成与高度规则

1. 给grid-auto-rows指定三个值，CSS会直接创建三行吗？ #

不会的，这里得先搞清楚grid-auto-rows的核心作用：它是用来定义隐式网格中行的大小，而不是直接创建行。

隐式网格是什么？就是当你的网格项数量超出了显式网格（用grid-template-rows定义的行）的范围时，浏览器自动生成的那部分网格。举个例子：

• 如果你用grid-template-rows: 100px;定义了1行显式网格，但放了5个网格项，那么剩下的4个就会触发隐式行的创建。
• 这时候如果你设置grid-auto-rows: 50px 70px 90px;，那这4个隐式行的高度会循环使用这三个值：第一个隐式行50px，第二个70px，第三个90px，第四个又回到50px。

也就是说，指定几个值不代表会创建对应数量的行，行的数量完全取决于有多少网格项需要“溢出”到隐式网格里。如果只有1个网格项溢出，那只会生成1行，用第一个值而已。

2. 设置该属性后，容器中是否会存在三行以父容器高度百分比为高度的行？ #

这得分两种情况看：

• 首先，你的grid-auto-rows值得确实用了百分比单位，比如grid-auto-rows: 20% 30% 50%;。但光有这个还不够——网格容器必须有明确的高度值（比如height: 500px或者min-height: 100vh），不然百分比高度会因为没有参考值而失效，浏览器会把行高设为内容高度。
• 其次，还是回到隐式行的逻辑：只有当有至少3个网格项溢出显式网格时，才会生成3个使用这三个百分比值的隐式行。如果只有2个溢出，那只会有2行，用前两个百分比值，第三个值根本不会被用到，自然也不存在对应的行。

简单说，这两个问题的核心都是要区分显式网格（主动定义的行/列）和隐式网格（自动生成的行/列），grid-auto-*系列属性只负责隐式网格的大小，不负责创建行的数量。

内容的提问来源于stack exchange，提问作者TMOTTM