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

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

Answer 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;
}