不同Grid容器中使用相同grid-area名称是否符合规范？

示例代码 #

CSS

body > div {
  display: grid;
  grid: ". left right ." auto / 1fr 200px 200px 1fr;
  background: grey;
  margin: 0 0 3px;
}

body > div > div:first-child {
  grid-area: left;
  background: lightgrey;
}

body > div > div:last-child {
  grid-area: right;
  background: darkgrey;
}

HTML

<div>
  <div>Left 1</div>
  <div>Right 1</div>
</div>

<div>
  <div>Left 2</div>
  <div>Right 2</div>
</div>

Grid Area的命名逻辑和HTML ID完全不同：

• HTML ID要求全局唯一，是因为它要承担全局标识功能（比如DOM选择器定位、页面锚点跳转），重复会引发功能冲突；
• 但Grid Area的名称作用范围仅限于所属的网格容器内部，不同网格容器是相互独立的作用域。你示例里的两个外层div是各自独立的网格容器，它们内部使用的left、right名称互不干扰，完全合规。

甚至在同一个网格容器中，CSS Grid规范也允许多个网格项共用同一个Grid Area名称——此时这些元素会重叠显示在同一个网格区域内，这也是合法的设计用法。

你的代码写法完全符合规范，浏览器的正常渲染结果也能验证这一点。

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