为何CSS Grid中Explicit与Implicit术语用于声明属性？

本质差异：主动规划 vs 自动补全 #

显式网格和隐式网格的核心区别，不在于属性是否写在CSS里，而在于是否是你主动定义的网格轨道/区域：

• 显式网格：是你通过grid-template-*系列属性直接创建的固定数量的网格轨道（行/列）或区域，属于你主动规划的网格核心结构。
• 隐式网格：是当网格项数量超出显式网格的容纳范围，或者被放置到显式网格以外的位置时，浏览器自动生成的额外轨道。grid-auto-*系列属性是用来规定这些自动生成轨道的规则，而非你主动创建轨道本身。

结合你的代码示例分析 #

你的CSS代码中：

#myDiv {
    display: grid;
    grid-template-columns: 50px; /* 显式列轨道 */
    grid-auto-rows: 50px 75px; /* 隐式行轨道的尺寸规则 */
}

• grid-template-columns: 50px; 明确创建了1列的显式轨道，这是你主动规划的网格列结构，所以属于显式定义。
• 你没有定义grid-template-rows，意味着显式行轨道的数量为0。HTML里的8个网格项需要被放置到网格中，浏览器会自动生成8个隐式行轨道，而grid-auto-rows: 50px 75px是告诉浏览器：这些隐式行的尺寸按照50px → 75px → 50px → 75px的循环规则来设置。

快速辨别显式/隐式属性的方法 #

• 显式网格属性：所有以grid-template-开头的属性，包括：
  • grid-template-columns：定义显式列轨道
  • grid-template-rows：定义显式行轨道
  • grid-template-areas：定义显式网格区域
• 隐式网格属性：所有以grid-auto-开头的属性，包括：
  • grid-auto-rows：设置自动生成的行轨道尺寸
  • grid-auto-columns：设置自动生成的列轨道尺寸
  • grid-auto-flow：控制网格项在隐式网格中的排列方向

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