CSS：新 css 网格的全宽背景

Question

我正在使用新的 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 ."
}

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

Answer 1

我在这里看到 3 个选项

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

Answer 2

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

一定要给 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;
}

Answer 3

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

截至今天（2019 年 8 月 8 日），Subgrid 已在 Firefox nightly 中发布，因此有望很快登陆真正的版本（tracked here). Unfortunately, there hasn't been much movement yet from the Chrome team (please star the issue in the Chrome bug tracker 以示支持）

代替子网格到达，我所做的是在容器元素内定义相同的网格线，或者，对于全角背景的特定情况，在包装元素上定义一个填充大小等于页面两侧 "empty" 间距的宽度。如果你使用 vw 单位，这是 easiest/most 可靠的，并且在 SASS 或 LESS

中使用变量是相当简单的

CSS：新 css 网格的全宽背景

CSS: Full width Background for new css grid

html

css

css-grid