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 ."
}

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

Answer 1

我在这里看到3个选项

您可以使用CSS background颜色设置一个或多个背景。此外，您可以使用渐变来设置渐变和纯色。
使用背景创建网格项，并使用您需要的值手动设置grid-row和grid-column。这些项目的负z-index应该与其他网格项重叠（z-index即使对于网格项也是静态定位的，对于flex项也是如此）。
网格容器的绝对定位元素。

Answer 2

我发现的最好的方法是将网格放在一个容器中，使其具有一定的宽度以使内容居中。并且你需要扩展背景所需的项目给出一个巨大的左/右填充，并且相同的边距为负。

请确保给身体一个溢出-x：隐藏;

<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中发布，因此希望不久后可以发布实际版本（tracked here）。不幸的是，Chrome团队还没有什么动静（请加注the issue in the Chrome bug tracker，以表示支持）

代替Subgrid的到来，我要做的是或者在容器元素内定义相同的网格线，或者对于全角背景的特定情况，在wrapper元素上定义一个等于页面两侧的“空白”装订线宽度的大小。如果您使用vw单位，这是最简单/最可靠的方法，并且在SASS或LESS中使用变量非常简单

CSS：全新css网格的全宽背景

3 个答案: