CSS：新 CSS 网格的全宽背景答案

【问题标题】：CSS: Full width Background for new css gridCSS：新 CSS 网格的全宽背景
【发布时间】：2023-04-08 06:11:02
【问题描述】：

我正在使用这样的新 css 网格：

#site {
   display: grid;
   grid-template-columns: 10% 1fr 1fr 1fr 10%;
   grid-template-rows: 100px auto;
   grid-template-areas:
      ". header header header ."
      ". content content sidebar ."
}

所以我有两行和 5 列，但只有 3 列有内容。我使用模板区域中的点来定义空白。这导致具有 3 列布局，左侧和右侧有空白区域。如果我将一个元素放置在具有背景颜色的网格区域中，则左侧和右侧的空白区域将保持白色（逻辑上）。我想要的是全宽背景（颜色），但我不确定如何实现这一点。我想到的一个选择是在背景中有第二个网格，它具有相同的列和行但没有空白，然后我可以用颜色填充它，但我认为这不是最佳做法。

【问题讨论】：

为什么你可以将背景图片添加到网格容器并使用background-image 大小和background-position 来控制它的对齐方式？顺便说一句，您可以使用10% 而不是空白列添加水平填充。
如果我将背景图像添加到#site，我无法为每行指定不同的背景。如果我将它添加到行中（例如标题），它就在区域内
实际上，您可以使用 background CSS 属性添加多个背景，并将它们定位在每个行/列/任何区域。
这应该是最佳实践吗？顺便说一句：我正在尝试设置颜色而不是图像。
用 3 个选项写了一个答案，选择你认为是“最佳实践”的最佳答案。

标签： html css css-grid

【解决方案1】：

我发现最好的方法是将网格放在一个容器内一定宽度以使内容居中。并让您需要扩展背景的项目提供巨大的左/右填充和相同的负边距。

一定要给 body 一个 overflow-x: hidden;

<div class="container">
   <div id="site">
       <div class="header"></div>
       <div class="content"></div>
       <div class="footer"></div>
   </div>
</div>

还有 CSS：

.container{
  width:1000px;
  margin: 0 auto; //
}    
#site {
  display: grid;
  grid-template-columns: 10% 1fr 1fr 1fr 10%;
  grid-template-rows: 100px auto;
  grid-template-areas:
     ". header header header ."
     ". content content sidebar ."
}

.header{
   background: red;
   padding: 0 3000px;
   margin: 0 -3000px;
}

body{
   overflow-x: hidden;
}

【讨论】：

padding: 0 100vw; 和 margin: 0 -100vw; 几乎没有修改，这是我的首选解决方案。

【解决方案2】：

我在这里看到 3 个选项

您可以使用 CSS background 颜色设置一个或多个背景。此外，您可以通过这种方式设置渐变，并且可以使用渐变来模仿纯色。
创建带有背景的网格项目并手动设置grid-row 和grid-column 为您需要的值。这些项目应该有负 z-index 以与其他网格项目重叠（z-index 甚至适用于网格项目的静态定位，对于弹性项目也是如此）。
网格容器的绝对定位元素。

【讨论】：

如果这些选项中的任何一个是最佳实践，那么 CSS 网格很糟糕。应该有更好的东西。

【解决方案3】：

听起来你想要做的最好由the upcoming Subgrid feature, arriving in Level 2 of CSS Grid 解决：这将允许外部元素及其子元素都使用相同的网格进行布局。

从今天（2019 年 8 月 8 日）开始，Subgrid 每晚都在 Firefox 中发布，因此有望很快发布真正的版本 (tracked here)。不幸的是，Chrome 团队还没有太多动静（请给the issue in the Chrome bug tracker 加注星标以表示您的支持）

代替 Subgrid 到达，我所做的是在容器元素内定义相同的网格线，或者，对于全宽背景的特定情况，在包装元素上定义一个填充，它等于大小为页面任一侧的“空”装订线的宽度。如果您使用 vw 单位，这是最简单/最可靠的，并且在 SASS 或 LESS 中使用变量相当简单

【讨论】：