我想知道css网格如何使用最大宽度。以旧方式，您将使用具有设置边距的包装类的容器。
使用CSS网格，根据您创建它们的方式，您不再需要使用容器，有时您无法添加容器。
我希望标题是全宽，但我希望其中的导航最大宽度为屏幕分辨率和边距的80％自动它，此代码类似于使用包装容器完成它的方式。问题是，我如何使用旁边和主要做同样的事情，因为他们不在父母内部设置最大宽度？
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
<html>
<body>
<header>
<nav>nav</nav>
</header>
<aside>aside</aside>
<main>main</main>
</body>
</html>
如果我必须将它们包装在容器内，那将如何影响网格？如果我在html或body标签上设置最大宽度，那么我如何获得一个延伸浏览器整个宽度的标题？
将此视为四列网格
grid-template-columns: 10% 275px 1fr 10%;
然后根据修改后的网格区域分配元素
grid-template-areas:
"header header header header"
". aside main .";
body {
display: grid;
grid-template-areas: "header header header header" ". aside main .";
grid-template-columns: 10% 275px 1fr 10%;
grid-template-rows: 1fr 1fr;
margin: 0;
padding: 0;
background: lightgrey;
}
header {
grid-area: header;
background:rebeccapurple;
}
header>nav {
max-width: 80%;
margin: auto;
background: lightblue;
}
aside {
grid-area: aside;
background: lightgreen;
}
main {
grid-area: main;
background: pink;
}<header>
<nav>nav</nav>
</header>
<aside>aside</aside>
<main>main</main>要使用max-width与nav尊重值，我们必须从标题中取出nav，使其成为网格项。然后我们可以在标题上的网格上对齐它。
使用minmax作为内柱我们可以达到预期的效果
body {
display: grid;
grid-template-columns: 1fr minmax(auto, 100px) minmax(auto, 300px) 1fr;
grid-template-rows: 1fr 1fr;
margin: 0;
padding: 0;
background: lightgrey;
}
header {
grid-column: 1/-1;
grid-row: 1;
background: rebeccapurple;
}
nav {
grid-column: 2 / 4;
grid-row: 1;
background: lightblue;
}
aside {
grid-column: 2;
background: lightgreen;
}
main {
grid-column: 3;
background: pink;
}<header></header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>这里使用较小的列宽进行演示仅供参考。根据需要修改最大数字。