css网格的最大宽度

我想知道css网格如何利用最大宽度。按照旧的方式，您将使用一个容器和一个包装器类来设置边距

使用CSS网格，根据您创建它们的方式，您不再需要使用容器，有时您也没有添加容器的位置

我希望标题是全宽的，但我希望其中的导航最大宽度为屏幕分辨率的80%，并自动设置边距，这段代码类似于包装容器。问题是，我如何对aside和main执行相同的操作，因为它们不在父对象的内部以设置最大宽度

body {
    display: grid;
    grid-template-areas: 
    "header header"
    "aside main";
    grid-template-columns: 275px 1fr;
    grid-template-rows: 1fr 1fr;
}

header {
    grid-area: header;
    border: solid 1px black;
}

header > nav {
    max-width: 80%;
    margin: auto;
    border: solid 1px blue;
}

aside {
    grid-area: aside;
}

main {
    grid-area: main;
}

HTML

导航
将其视为一个四柱网格

grid-template-columns: 10% 275px 1fr 10%;

然后根据修改后的栅格区域指定图元

grid-template-areas: 
"header header header header"
". aside main .";


正文{
显示：网格；
网格模板区域：“页眉”“。侧边主视图。”；
网格模板柱：10%275px 1fr 10%；
网格模板行：1fr 1fr；
保证金：0；
填充：0；
背景：浅灰色；
}
标题{
网格区域：标题；
背景：丽贝卡紫；
}
标题>导航{
最大宽度：80%；
保证金：自动；
背景：浅蓝色；
}
旁白{
网格区域：侧边；
背景：浅绿色；
}
主要{
网格区域：主；
背景：粉红色；
}

导航
在一边
main
也很有用-这很有意义！谢谢我应该如何使用最大宽度而不是百分比？例如，我希望最大宽度为900px，而不是标题>导航中的最大宽度：80%。我希望侧边和主边与导航网格对齐-不能做任何事情…但你要的不是真正的网格…我觉得。还在想，太棒了！谢谢这有助于我更好地理解网格。我在网上发布了一个相关问题
grid-template-areas: 
"header header header header"
". aside main .";