如何使CSS网格块具有背景色？

我使用网格属性来构建网站。但我遇到了一个问题，我不能像预期的那样使用背景属性

#换行{
身高：100%；
显示：网格；
网格模板列：重复（12，1fr）；
网格模板行：35px 125px；
}
.line1{
宽度：1px；
高度：16px；
背景：#ccc；
}
标题{
背景色：#221816；
网格柱：2/12；
}
标题：topNav{
颜色：#fff；
}
标题：topNav ul{
高度：35px；
显示器：flex；
弯曲方向：行；
证明内容：柔性端；
}
标题：topNav ul li{
自对准：居中；
右边填充：16px；
}
*,
：之前，
：之后{
保证金：0；
填充：0；
边界：0；
颜色：#fff；
列表样式：无；
}

mypages
顾客

将标题更改为：

标题{背景色：#221816；网格列：1/13；}

---

这就是为什么：你的页面宽度有12个分区，但你不是按分区计算面积，而是按行计算。

拿一张草稿纸，从一边到另一边画三行，然后从上到下画13行，代表你的12列和标题/导航区域的2行。现在，横跨的三条线编号为1, 2，3条（一条在顶部，两条在中间，三条在底部）。13条垂直线以1号线开始，如果你一直算，则以13号线结束。因此，要使页眉从页面的一侧转到另一侧，它需要从第1行开始，到第13行结束（1/13）。这有意义吗？

如果我正确地理解了您要做的事情，您可以用更少的努力获得您想要的，正如我在下面所示。用flex做这一行就行了。您不需要使用网格

在我写下这个答案后，你随后的评论说你想做一些你没有向我们展示的事情，还有一些与这个不同的行。您可以按照我为这一行演示的方式进行操作，然后添加另一个带有网格的div，并使用它执行您想要的操作

如果这对你不起作用，那么你需要进一步澄清你想做什么

.line1{
宽度：1px；
身高：100%；
背景：#ccc；
}
标题{
背景色：#221816；
}
标题：topNav{
颜色：#fff；
}
标题：topNav ul{
高度：35px；
显示器：flex；
弯曲方向：行；
证明内容：柔性端；
}
标题：topNav ul li{
填充：0.2%；
自对准：居中；
}
*,
：之前，
：之后{
保证金：0；
填充：0；
颜色：#fff；
列表样式：无；
}

mypages
顾客

我不确定我是否理解您的意图。你想让菜单项在黑色背景上均匀分布吗？我的观点是..我还有另外一个块要构建。他们将占据2/12区域。它们的网格属性没有问题，因为它们有白色背景。但该元素有棕色背景。我希望它们看起来像1/13区域。所以，按照我在这一行的答案中所示，然后在它下面为网格添加另一个div，然后按照它的方式进行操作。我明白了，所以我不能使用背景色和宽度都是这样的网格框？