Css-grid：容器外的背景出血答案

【问题标题】：Css-grid: Bleed background outside containerCss-grid：容器外的背景出血
【发布时间】：2019-05-02 05:08:42
【问题描述】：

考虑以下对容器具有最大宽度约束的 3 列网格布局：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 56px minmax(56px, auto) 56px;
  max-width: 300px;
  margin: auto;
}

header {
  background-color: grey;
  grid-column: 1 / span 3;
  grid-row: 1 / 2;
}

main {
  background-color: #2E64FE;
  grid-column: 1 / span 2;
  grid-row: 2 / 3;
}

aside {
  background-color: #FF0040;
  grid-column: 3 / span 1;
  grid-row: 2 / 3;
}

footer {
  background-color: grey;
  grid-column: 1 / span 3;
  grid-row: 3 / 4;
}

header, main, aside, footer {
  line-height: 56px;
  text-align: center;
  vertical-align: middle;
}

<html>
  <body>
    <div class='container'>
      <header>Header</header>
      <main>Main</main>
      <aside>Sidebar</aside>
      <footer>Footer </footer>
    </div>
  </body>
</html>

理想情况下，当视口宽度高于最大宽度时，我想在容器外放出页眉和页脚的背景，但将网格及其结构保持在最大宽度内，如示例（包括页眉和页脚的内容）。

我考虑过这些方法：

忘记最大宽度容器，使用带最小最大宽度的全宽度容器，并在页眉和页脚下方放置带有背景颜色的全跨度 div (https://codepen.io/anon/pen/OaryXj)。我不喜欢这种方法，因为它添加了纯粹用于样式的额外元素，并且因为它添加了两个额外的列（我可能会接受这个，使用命名列）
使用与上述相同的方法，但不要添加额外的 div，而是使用带有“padding: 0 calc((100% - 900px)/2);”的全跨度页眉和页脚(https://codepen.io/anon/pen/BGvoxx)。我也不喜欢这种方法，因为我不明白为什么它在 100%

还有其他想法吗？一些具有负边距和页眉/页脚填充的 calc() 魔法？

【问题讨论】：

或许是这样的？ jsfiddle.net/ydj470cb
@Michael_B 这不会将页眉和页脚内容框的宽度设置为 main+sidebar (300px) 的宽度，并且不会将此内容框与 main+sidebar 区域对齐。
jsfiddle.net/ydj470cb/1
“我不明白为什么它在 100% - 因为没有负数之类的东西填充。如果 calc 生成的值对属性无效，则该声明将被忽略（就像您将无效值直接写入样式表一样。）
@Michael_B 谢谢，第二把小提琴工作得很好。分为您的解决方案和 Temani 的解决方案。绝对定位的伪元素更接近我所关注的，但嵌套网格更强大。

标签： css background-color css-grid

【解决方案1】：

公认的答案是惊人的，但你可以通过稍微改变你的标记来解决你的问题。通过更改 div 的顺序并将容器类的关注点与网格的关注点分开，您会得到相同的结果：

body { 
 margin: 0;
 overflow-x:hidden;
}

.container {
  max-width: 300px;
  margin: auto;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: minmax(56px, auto);
}

header, footer {
  background-color: grey;
  height: 56px;
}

main {
  background-color: #2E64FE;
  grid-column: 1 / span 2;
}

aside {
  background-color: #FF0040;
  grid-column: 3 / span 1;
}

header, main, aside, footer {
  line-height: 56px;
  text-align: center;
  vertical-align: middle;
}

<html>
  <body>
    <header>
      <div class="container">Header</div>
    </header>
    <div class="container grid">
      <main>Main</main>
      <aside>Sidebar</aside>
    </div>
    <footer>
      <div class="container">Footer</div>
    </footer>
  </body>
</html>

我看到接受的答案真正闪耀的用例是当您有多个列并且您不想破坏网格但将其中一列的背景颜色扩展到浏览器的边缘时......

body {
 overflow-x:hidden;
 margin: 0;
}

.container {
  max-width: 300px;
  margin: auto;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: minmax(56px, auto);
}

header, footer {
  background-color: grey;
  height: 56px;
}

aside {
  background-color: #FF0040;
  grid-column: 1 / span 1;
}

main {
  background-color: #2E64FE;
  grid-column: 2 / span 2;

}

.extend-right {
  position: relative;
}

.extend-right:after {
  content: '';
  position: absolute;
  height: 100%;
  left: 100%;
  right: -100vw;
  background-color: inherit;
}

header, main, aside, footer {
  line-height: 56px;
  text-align: center;
  vertical-align: middle;
}

<html>
  <body>
    <header>
      <div class="container">Header</div>
    </header>
    <div class="container grid">
      <aside>Sidebar</aside>
      <main class="extend-right">Main</main>
    </div>
    <footer>
      <div class="container">Footer</div>
    </footer>
  </body>
</html>

【讨论】：

【解决方案2】：

如果只是关于背景和着色，你可以使用伪元素来产生溢出效果：

body {
 overflow-x:hidden;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 56px minmax(56px, auto) 56px;
  max-width: 300px;
  margin: auto;
}

header {
  background-color: grey;
  grid-column: 1 / span 3;
  grid-row: 1 / 2;
  position:relative;
}
header:before,
footer:before{
  content:"";
  z-index:-1;
  position:absolute;
  top:0;
  bottom:0;
  left:-100vw;
  right:-100vw;
  background:inherit;
}

main {
  background-color: #2E64FE;
  grid-column: 1 / span 2;
  grid-row: 2 / 3;
}

aside {
  background-color: #FF0040;
  grid-column: 3 / span 1;
  grid-row: 2 / 3;
}

footer {
  background-color: grey;
  grid-column: 1 / span 3;
  grid-row: 3 / 4;
  position:relative;
}

header, main, aside, footer {
  line-height: 56px;
  text-align: center;
  vertical-align: middle;
}

<html>
  <body>
    <div class='container'>
      <header>Header</header>
      <main>Main</main>
      <aside>Sidebar</aside>
      <footer>Footer </footer>
    </div>
  </body>
</html>

【讨论】：