具有全浏览器宽度背景色的CSS网格项？

我现在尝试跳转介绍CSS网格！但有一件事我不清楚。您将如何构建主网格/布局，其中您的页眉、英雄和页脚背景颜色可能达到了浏览器的全宽（如stackoverflow页眉/页脚）？如果没有像您今天使用flexbox、floats&co.那样嵌套div，这是否可能以一种干净的方式实现？我希望你能理解我想做什么。我添加了一个图像，也许这样会更清晰；）

好的，这是一把小提琴：

网格布局测试
标志

菜单项
菜单项2
菜单项#3

英雄横幅

内容
Lorem ipsum door sit amet，继续为精英们献计献策。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。兼社会
产牛和马格尼斯病牛的出生地是蒙特斯，而牛的出生地则是蒙特斯。Donec quam felis、ultricies nec、Pelletsque
欧盟、pretium quis、sem。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、vulputate eget、，
阿库。在埃尼姆·胡斯托、朗卡斯·乌特、伊佩拉、维尼那提斯·维塔、胡斯托。猫咪的口头禅是一种很好的口头禅。
整数tincidunt。克拉斯·达皮布斯。万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利奥·利古拉，
porttitor eu、consequat vitae、eleifend ac、enim。阿利奎姆·勒姆·安特、达比布斯·安特、维韦拉·奎斯、费吉亚·阿泰勒斯。
长生不老不老。奎斯克·鲁特罗姆。埃涅亚饮食。奥古斯一世。
乌兰科乌尔里西斯库拉比图尔酒店。南乙对。艾蒂安·朗库斯。梅塞纳斯·坦普斯，泰勒斯·埃吉特调味品朗卡斯，
我是一个自由的人，坐在阿梅特的位子上。Nam quam nunc、blandit vel、luctus pulvinar、hendrerit
我是罗琳。这是一个非常重要的时刻。不要为威尼斯人的自由而浪费生命。纳拉姆奎斯
赌注。我坐在那里，或者我坐在那里。杜伊斯·利奥。塞德·弗林斯·莫里斯坐在阿梅特·尼布旁边。多奈克索达莱斯酒店
大矢状体。塞德·康塞卡特、利奥·埃吉特·比本杜姆·索达莱斯、奥古斯·维利特·库苏斯·努恩
边栏
页脚
* {
框大小：边框框
}
html，
身体{
保证金：0；
填充：0；
字体系列：-苹果系统、BlinkMacSystemFont、“Segoe UI”、Roboto、Helvetica、Arial、无衬线、“苹果颜色表情”、“Segoe UI表情”、“Segoe UI符号”；
}
.集装箱{
显示：网格；
保证金：0自动；
最大宽度：1000px；
网格模板区域：“顶栏顶栏顶栏”“英雄”“内容侧栏”“页脚页脚”；
}
.顶杆{
网格区域：顶栏；
显示：网格；
网格模板列：自动1fr；
背景色：暗绿色；
颜色：白色；
填充：20px0；
}
托巴保险公司{
显示器：flex；
列表样式：无；
保证金：0；
填充：0；
证明内容：柔性端；
}
.英雄{
网格区域：英雄；
背景颜色：浅珊瑚；
最小高度：300px；
显示：网格；
放置项目：居中；
}
.侧边栏{
网格区域：侧栏；
宽度：200px；
背景颜色：浅灰色；
}
.页脚{
网格区域：页脚；
背景颜色：暗金色；
}

您可以使用容器创建特定的HTML布局，该容器将强制某些元素保持在设置的宽度内。然后，容器外部的任何内容都将显示为全宽

这是现场直播

HTML

<div class="wrapper">
    <div class="section">
        <div class="container">
            <!-- Set width content -->
        </div>
    </div>
    <div class="section">
        <div class="container">
            <!-- Set width content -->
        </div>
    </div>
    <div class="section">
        <!-- Full width content -->
    </div>
</div>

---

请分享你迄今为止所做的尝试。谢谢。这是一把小提琴。因为我的素描，我认为这是可以想象的。这就是我的意思！！谢谢你@Paulie_D！！谢谢你的帮助！但在我看来，这与css网格出现之前的几年中相同的非css网格方式。因为我必须为每个节容器本身定义一个网格。如果没有嵌套、嵌套和嵌套，我无法使用整个CSS网格布局……我真的不明白你的意思。因此，您无法将网格包装到容器中？否；）我只是认为使用css网格可以避免这种情况。我想我可以避免写这么多“无用”的容器。但也许我对css网格的期望是错误的。在我的想象中唯一缺少的是，让背景颜色、背景图像和类似的东西从行中“突出”出来，成为全浏览器宽度。这将使我的标记和css更干净。啊，好的。不，网格实际上仅用于直接在设定区域内实现布局。没有什么魔法可以简单地将子元素压缩到它们的父元素中而不在某处添加包装器（据我所知）。好吧，这是正确的答案：）我只是觉得我遗漏了一些东西。谢谢你@Levano！！

.wrapper {
  width: 100%;
  height: 100%;
}

.container {
  width: 80%;
  margin: 0 auto;
}