关于CSS显式网格定义的疑问及grid-auto-rows表现困惑

核心结论 #

仅设置grid-template-columns或grid-template-rows其中一项，确实能构成显式网格——MDN的定义本身就明确，只要通过这两个属性定义了任意行或列，就属于显式网格范畴。你遇到的grid-auto-rows行为差异，不是对定义的误解，而是忽略了显式轨道与自动轨道的作用逻辑细节。

行为差异的具体原因 #

• 示例1：仅设置grid-template-columns + grid-auto-rows
  此时你只定义了显式列轨道，但没有定义任何显式行轨道。网格容器中所有的行轨道都会被视为自动轨道，所以grid-auto-rows会作用于所有行——因为根本不存在显式行轨道来区分“内外”。

• 示例2：同时设置grid-template-columns + grid-template-rows
  这时你既定义了显式列，也定义了显式行轨道。grid-auto-rows的核心作用就是为超出显式行数量的自动生成行设置尺寸，所以只会作用在显式行之外的轨道，这是完全符合规范的预期行为。

关键细节补充 #

显式网格的“显式”仅针对你通过grid-template-*主动声明的轨道，未主动声明的轨道都属于自动网格范畴。当你只定义了列或行其中一类时，另一类的所有轨道自然都归为自动轨道，对应的grid-auto-*属性就会作用于该类的全部轨道。

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