如何使用grid -template-area在全视口高度创建一个基于侧边栏的3 x 3平铺CSS网格？

<div class="container">
    <div class="sidebar">侧边栏</div>
    <div class="grid">
        <div class="item item1">项目1</div>
        <div class="item item2">项目2</div>
        <div class="item item3">项目3</div>
        <div class="item item4">项目4</div>
        <div class="item item5">项目5</div>
        <div class="item item6">项目6</div>
        <div class="item item7">项目7</div>
        <div class="item item8">项目8</div>
        <div class="item item9">项目9</div>
    </div>
</div>

.container {
    display: grid;
    height: 100vh; /* 设置容器高度为全视口高度 */
    grid-template-columns: 1fr 3fr; /* 将容器分为侧边栏和网格两列 */
    grid-template-rows: 1fr; /* 设置容器为单行布局 */
    grid-template-areas: 
        "sidebar grid"; /* 使用grid-template-areas定义区域布局 */
}

.sidebar {
    grid-area: sidebar; /* 将侧边栏放置在sidebar区域 */
}

.grid {
    grid-area: grid; /* 将网格放置在grid区域 */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 创建3列等宽的网格 */
    grid-template-rows: repeat(3, 1fr); /* 创建3行等高的网格 */
    gap: 10px; /* 设置网格之间的间隔 */
}

.item {
    background-color: #ddd; /* 设置项目背景颜色 */
    padding: 10px; /* 设置项目内边距 */
}

.item1 { grid-area: 1 / 1 / span 1 / span 1; }
.item2 { grid-area: 1 / 2 / span 1 / span 1; }
.item3 { grid-area: 1 / 3 / span 1 / span 1; }
.item4 { grid-area: 2 / 1 / span 1 / span 1; }
.item5 { grid-area: 2 / 2 / span 1 / span 1; }
.item6 { grid-area: 2 / 3 / span 1 / span 1; }
.item7 { grid-area: 3 / 1 / span 1 / span 1; }
.item8 { grid-area: 3 / 2 / span 1 / span 1; }
.item9 { grid-area: 3 / 3 / span 1 / span 1; }