Html CSS网格与打破布局。如何为不同页面上的内容设置不同的大小？

我有一个网格布局。我使用mobile first方法构建它，这意味着默认情况下（媒体查询之外）所有内容都是针对移动的

桌面布局如下所示：

我有一个“主”内容区，设置为

80em

。让我们假设这是网站的主页

但是，如果我需要在某些页面（如联系人页面）上的“主”区域稍微窄一点，我该怎么办？可能是

70em

而不是

80em

，但仍然居中

在网格中，我有：

.grid-layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 80em)
      minmax(0, 1fr);
    grid-template-rows: repeat(2, auto) 200px 1fr;
  }

下面是完整的代码，您可以确切地看到它是如何工作的：

：根目录{
框大小：边框框；
}
*,
*：：之前，
*：：之后{
框大小：继承；
}
身体{
保证金：0；
填充：0；
}
.网格布局{
显示：网格；
网格模板列：1fr；
网格模板行：重复（2，自动）1fr 1fr；
最小高度：100vh；
}
.标题{
背景：轻鲑鱼；
}
梅因先生{
背景：轻海绿色
}
.推荐书{
背景：浅绿色；
}
.页脚{
自我对齐：结束；
背景：轻鲑鱼；
}
@介质（最小宽度：52em）{
.网格布局{
网格模板列：
最小最大值（0，1fr）
最小最大值（0，80em）
最小最大值（0，1fr）；
网格模板行：重复（2，自动）200px 1fr；
}
.网格布局>*{
网格柱：1/-1；
}
梅因先生{
网格柱：2；
}
}

网格布局
标题
主要
内容

内容

内容

内容

内容

推荐书
页脚

一种可能性是定义一个

CSS

变量，您可以在某些特定页面中覆盖该变量，但使用

80em

作为默认值：

HTML

<div class="grid-layout" style="--w: 70em">
</div>

否则，如果变量数量有限，则可以创建一组预定义类，例如

@media (min-width: 52em) {
  .grid-layout {
    --w : 80em
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, var(--w))
      minmax(0, 1fr);
      grid-template-rows: repeat(2, auto) 200px 1fr;
  }
  ...

  .grid-layout.variantA { --w: 70em }
  .grid-layout.variantB { --w: 90em }

}

---

是否也可以将类应用于

网格容器

中，例如：

.grid-layout.contact{grid template columns:minmax（0，1fr）minmax（0，60em）minmax（0，1fr）；}

并为需要不同宽度内容区域的页面提供单独的类？

@media (min-width: 52em) {
  .grid-layout {
    --w : 80em
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, var(--w))
      minmax(0, 1fr);
      grid-template-rows: repeat(2, auto) 200px 1fr;
  }
  ...

  .grid-layout.variantA { --w: 70em }
  .grid-layout.variantB { --w: 90em }

}