不同网格容器中的网格区域名称相同？

Question

浏览器根据需要呈现以下 HTML 和 CSS，但我的问题仍然是：除了 HTML 中的 ID 之外，网格区域名称不必是唯一的，这是否正确？

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;
}

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

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

Answer 1

CSS 网格布局模块级别 1 规范没有明确提及在容器内重用网格区域名称的限制。 CSS 的作用域规则适用于此 - 网格区域名称的作用域为定义它们的网格容器。每个网格容器都会创建自己的布局上下文，并且网格区域名称在该上下文中解析。

如果规范没有明确禁止它并且浏览器可以很好地处理它，那么您有一定的灵活性，但为了代码的清晰性，建议使用唯一的名称。