CSS网格和指定多个区域

我需要一些元素重叠，我还希望通过区域名称而不是行/列来指定内容，因为这样可以更好地阅读

我一生都无法理解如何根据MDN示例指定多个网格区域。或者，如果可能的话，文章根据语法示例建议它是可能的，但它实际上是如何工作的？？一点线索也没有

示例问题：

document.querySelector（“输入”）.focus（）
#我的网格{
显示：网格；
网格间距：5px；
网格模板行：50px 50px 50px；
网格模板列：50px 50px 50px；
网格模板区域：“a b c”
“d e f”
“g h i”；
}
#我的网格>div{
文本对齐：居中；
线高：50px；
边框：1px实心rgba（0,0,0,0.3）；
背景色：rgba（0,0,0,0.1）；
}

A.
B
C
D
E
F
G
H
我
键入您自己的区域
您需要指定4个值，如
网格区域：d/d/d/e
，这意味着：

grid-row-start: d;
grid-column-start: d; /* Start at d */
grid-row-end: d;
grid-column-end: e; /* End at e */


document.querySelector（“输入”）.focus（）
#我的网格{
显示：网格；
网格间距：5px；
网格模板行：50px 50px 50px；
网格模板列：50px 50px 50px；
网格模板区域：“a b c”
“d e f”
“g h i”；
}
#我的网格>div{
文本对齐：居中；
线高：50px；
边框：1px实心rgba（0,0,0,0.3）；
背景色：rgba（0,0,0,0.1）；
}

A.
B
C
D
E
F
G
H
我
键入您自己的区域