我正在使用新的 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 列布局,左侧和右侧都有空白。 如果我将一个元素放置在具有背景颜色的网格区域中,则左侧和右侧的空白区域将保持白色(逻辑上)。 我想要的是全宽背景(颜色),但我不太确定如何实现这一点。我想到的一个选择是在背景中有第二个网格,它具有相同的列和行,但没有空白,然后我可以用颜色填充它,但我认为这不是最佳实践。
最佳答案
我发现的最好的方法是将网格放入容器内,使其具有一定的宽度以使内容居中。并且让您需要扩展背景的元素提供巨大的左/右填充,以及相同的负边距。
只要确保给主体一个溢出-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;
}
关于html - CSS:新 CSS 网格的全宽背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45531770/