HTML网格布局不符合CSS

因此，我正试图用纯HTML和CSS建立一个网格格式的网站页面，正如您将在下面的代码中看到的那样

我正试图在两个div标记之间切换，这两个div标记位于

标题

和

内部占位符

标记的左侧列

您将看到HTML布局与

网格模板区域的对齐，以及
网格模板行指定的行数

那么，为什么我只在屏幕的一角得到一个红色的框，而根据图示，我想要的东西却很明显——除了一个曲线框，后面是一个直框，后面是一个曲线框等等，从左边往下走

我已尝试更改
fr
编号，以适应左侧的行数

多谢各位



.grid{
显示：网格；
网格模板柱：1fr 1fr；
网格模板行：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr；
网格模板区域：
“标题”
“标题内容”
“内部占位符内容”
“标题内容”
“内部占位符内容”
“侧边栏内容”
“页脚”；
栅隙：10px；
}
.头衔{
网格区域：标题；
}
.标题{
网格区域：标题；
}
.侧边栏{
网格区域：侧栏；
}
.内容{
网格区域：内容；
}
.页脚{
网格区域：页脚；
}
.内部占位符{
网格区域：内部占位符；
}
.grid div:n个子项（偶数）{
背景色：红色；
}
.grid div:n个子项（奇数）{
背景颜色：绿色；
}

标题
标题
标题
边栏
内容
页脚
您似乎误解了网格区域的工作原理。如果任何网格区域跨越一行或一列以上，则需要形成正方形或矩形。这意味着它们还需要在一个连续的序列中，如2x2或1x3等，在您的例子中，您将标题区域和占位符区域彼此分割，这会破坏网格


.grid{
显示：网格；
网格模板列：重复（2，1fr）；
网格模板行：重复（7，1fr）；
网格模板区域：
“标题”
“标题内容”
“内部占位符内容”
“标题2内容”
“内部占位符2内容”
“侧边栏内容”
“页脚”；
栅隙：10px；
}
.头衔{
网格区域：标题；
}
.标题{
网格区域：标题；
}
.校长2{
网格区域：Header2；
}
.侧边栏{
网格区域：侧栏；
}
.内容{
网格区域：内容；
}
.页脚{
网格区域：页脚；
}
.内部占位符{
网格区域：内部占位符；
}
.内部-2{
网格区域：内-2；
}
.grid div:n个子项（偶数）{
背景色：红色；
}
.grid div:n个子项（奇数）{
背景颜色：绿色；
}

标题
标题
校长2
边栏
内容
页脚
谢谢您，我会将您的答案标记为正确。祝你一切顺利！：）