Html CSS网格：`Grid template areas`—；空区使用周期不工作

我试图将元素放置在一个简单的9x9网格中，但当我试图将元素放置在左下角或右下角时，它们并没有停留在那里，而是在它们应该位于的位置上方的一个框中结束

根据，在定义

网格模板区域时为空框放置
就足够了…但我也尝试使用
网格区域：1/2/3/4
使用常规布局，但这也不起作用

这就是我所拥有的，css：

grid-template-areas: 
"topBar topBar topBar"
". main ."
"aboutDiv . optionsDiv";


/*日光浴主题色，剪裁简洁*/
：根{
--基数2:#eee8d5；
--基础3:#fdf6e3；
--黄色：#b58900；
}
身体{
保证金：0；
背景色：var（--base3）；
身高：100%；
}
.包装纸{
宽度：100vw；
高度：100vh；
显示：网格；
网格模板柱：0.1fr 0.8fr 0.1fr；
网格模板行：0.1fr 0.8fr 0.1fr；
网格模板区域：
“顶栏顶栏顶栏”
“.main。”
“关于v.选项div”；
}
.顶杆{
背景色：var（--黄色）；
网格区域：顶栏；
}
梅因先生{
网格区域：主；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
文本区{
调整大小：垂直；
背景色：var（--base2）；
}
.大约{
网格面积：约45；
}
.期权司{
网格区域：选项div；
}

卡里

关于
选择权
您的ID和类之间不匹配

HTML中有ID，CSS中有类

HTML

<div id="aboutDiv">
        about
</div>
<div id="optionsDiv">
        options
</div>

把它修好，它就可以正常工作了


/*日光浴主题色，剪裁简洁*/
：根{
--基数2:#eee8d5；
--基础3:#fdf6e3；
--黄色：#b58900；
}
身体{
保证金：0；
背景色：var（--base3）；
身高：100%；
}
.包装纸{
宽度：100vw；
高度：100vh；
显示：网格；
网格模板柱：0.1fr 0.8fr 0.1fr；
网格模板行：0.1fr 0.8fr 0.1fr；
网格模板区域：“topBar topBar topBar”“.main”““aboutDiv.optionsDiv”；
}
.顶杆{
背景色：var（--黄色）；
网格区域：顶栏；
}
梅因先生{
网格区域：主；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
文本区{
调整大小：垂直；
背景色：var（--base2）；
}
#大约{
网格面积：约45；
}
#选项div{
网格区域：选项div；
}

卡里

关于
选择权

.aboutDiv {
    grid-area: aboutDiv;
}
.optionsDiv {
    grid-area: optionsDiv;
}