Identical grid-area names in different grid containers?

Question

Browsers render the following HTML & CSS as desired, but still my question: is it correct that grid-area names, other than IDs in HTML, don't have to be unique?

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

The CSS Grid Layout Module Level 1 specification doesn't explicitly mention restrictions on reusing grid area names within a container. The scoping rules of CSS apply here – the grid area names are scoped to the grid container in which they are defined. Each grid container creates its own layout context, and grid area names are resolved within that context.

If the specification doesn't explicitly forbid it and browsers handle it well, you have some flexibility, but it's advisable to use unique names for clarity in your code.