Html CSS网格布局，最大宽度，内容居中

我正在学习CSS网格（我知道早该学习了）。我曾向自己提出挑战，要将一个相对标准的基于浮点的布局转换为网格，但无法理解最后一部分

我的目标是要有一个布局，内容（徽标+导航，边栏+内容）居中，最大宽度

。例如，徽标+导航的最大宽度应为600px。我还需要一个覆盖视口全宽的实心填充背景（与可变高度徽标/导航行的高度相匹配）

第一列（徽标和侧边栏）应收缩以适合其内容-因此第一列的宽度仅与徽标/侧边栏之间的宽度相同。然后，导航/内容应填满
最大宽度所允许的剩余空间

以下是我最好的尝试。主内容的宽度不填充
最大宽度
。相反，主要内容的宽度是徽标的宽度+250px（由网格列定义的宽度）

我希望实现的是-将Logo+Nav的
最大宽度
定义为特定的宽度（比如600px），并使Logo列收缩以适合其内容


正文{
利润率：40像素；
}
.填充{
网格列开始：1；
网格柱端：6；
网格行开始：1；
网格行端：1；
背景颜色：灰色；
}
.标志{
网格区域：标志；
字体大小：calc（1rem+4vw）；
}
.侧边栏{
网格区域：侧栏；
}
.内容{
网格区域：内容；
}
.导航{
网格区域：导航；
文本对齐：右对齐；
}
.页脚{
网格区域：页脚；
}
.包装纸{
显示：网格；
栅隙：10px；
网格模板列：自动最小内容120px 120px自动；
网格模板区域：“…徽标导航…”“…侧栏内容…”“…页脚页脚…”；
背景色：#fff；
颜色：#444；
}
.盒子{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：10px；
}
.标题，
.页脚{
背景色：#999；
}

标志
导航
边栏
内容

内容比以前多了，所以这个专栏现在相当高了。
页脚
您可以有一个两列网格，其中包含
网格模板列：auto 1fr
，这样第一列的宽度为其内容的宽度（与徽标/侧边栏之间的宽度相同），第二列的宽度为剩余空间（注意，我已将
最大宽度：600px
设置为网格容器）

我也有一个坚实的填充背景覆盖的要求
视口的全宽（与变量的高度匹配
高度标志/导航行）

为此，您可以执行以下操作：

通过设置
网格行
和
网格列
属性，首先修复第一行中的
徽标
和
导航

现在，为重叠第一行的
wrapper
使用一个伪元素（但是使用
z-index
属性堆叠在下面）

将
marginleft
属性设置为
calc（-50vw+50%）
和
width
设置为100vw，以在视口中拉伸实心填充背景

请参见下面的演示：


正文{
利润率：40像素；
}
.包装纸{
显示：网格；
栅隙：10px；
网格模板列：自动1fr；/*2列网格*/
/*背景色：#fff*/
颜色：#444；
最大宽度：600px；/*布局的最大宽度*/
边距：0自动；/*在视口中居中*/
}
.标志{
字体大小：calc（1rem+4vw）；
网格行：1；/*将徽标固定在第一行*/
网格列：1；/*将徽标固定在第一列中*/
}
.导航{
文本对齐：右对齐；
网格行：1；/*将导航固定在第一行*/
网格列：2；/*将导航固定在第二列中*/
}
.页脚{
网格列：span 2；/*页脚跨两列*/
}
.盒子{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：10px；
}
.标题，
.页脚{
背景色：#999；
}
.wrapper:在{/*之后将其放置在第一行*/
内容：''；
显示：块；
网格行：1；
网格柱：1/3；
宽度：100vw；
左边距：计算（-50vw+50%）；
背景：灰色；
z索引：-1；/*将其推到第一行后面*/
}

标志
导航
边栏
内容

内容比以前多了，所以这个专栏现在相当高了。
页脚
对中
将网格容器水平居中相对简单。在父对象上使用柔性对齐特性：

body {
  display: flex;
  justify-content: center;
}


最大宽度
您可以使用
max width
或
flex
属性在网格容器上创建最大宽度

.wrapper {
  flex: 600px 0 1;
}

这条规则规定：


弹性基准：600px（起始宽度）
flex-grow:0
（项目不能扩展到600像素以上）
弹性收缩：1
（该项目可以收缩）

此命令实质上相当于
最大宽度：600px


双栏布局
你写道：

第一列（徽标和侧边栏）应收缩以适合其内容-因此第一列的宽度仅与徽标/侧边栏之间的宽度相同。然后，导航/内容应填满最大宽度允许的剩余空间

试试这个：

.wrapper {
  flex: 600px 0 1;
  display: grid;
  grid-template-columns: min-content 1fr;
}


正文{
利润率：40像素；
显示器：flex；
证明内容：中心；
}
.包装纸{
flex:600px01；
显示：网格；
栅隙：10px；
网格模板列：最小内容1fr；
网格模板区域：“徽标导航”
“侧边栏内容”
“页脚”；
背景色：#fff；
颜色：#444；
}
.标志{
网格区域：标志；
字体大小：calc（1rem+4vw）；
}
.侧边栏{
网格区域：侧栏；
}
.内容{
网格区域：内容；
}
.导航{
网格区域：导航；
文本对齐：右对齐；
}
.页脚{
网格区域：页脚；
}
.填充{
背景颜色：灰色；
}
.盒子{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：10px；
}
.标题，
.页脚{
背景色：#999；
}

标志
导航
边栏
内容