跨越视口宽度的背景颜色

Question

我正在尝试使用跨越视口宽度的 CSS 网格 布局构建响应式导航栏，但内部项目应居中并与页面上的其他容器元素对齐。

我想要的结果显示在下面的代码中，但是，我不认为这是一个优雅的解决方案，因为我使用了 2 个独立的 <div> 元素堆叠在一起。

一个<div> 用于使项目居中，第二个<div> 用于覆盖整个视口宽度的background-color。

---

有没有更好的方法使用 CSS Grid 布局？

[编辑] 我正在寻找一种方法使该技术可在多个元素上重复使用。

---

请将代码 sn-p 展开到整页，以便布局正确显示

.container {
  display: grid;
  grid-template-columns: 1fr repeat(4, minmax(min-content, 150px)) 1fr;
  border: 2px solid black;
  height: 100vh;
}

.nav {
  grid-area: 1 / 2 / 1 / span 4;
  height: 50px;
  background-color: grey;
  border: 1px solid red;
  position: relative;
}

.nav-underlay {
  background-color: grey;
  grid-area: 1 / 1 / 1 / span 7;
  height: 50px;
}

.content {
  grid-area: 2 / 2 / 2 / span 4;
  height: 200px;
  background-color: grey;
  border: 1px solid red;
}

<body class="container">
  <div class="nav">this box should stay aligned with the content box</div>
  <div class="nav-underlay"></div>
  <div class="content">Content box</div>
</body>

Answer 1

由于您要扩展的背景区域仅用于装饰目的（即，您不使用该区域来传达内容），因此您可以使用 CSS 伪元素而不是实际的 HTML 元素。

伪元素在应用于网格容器时会变成网格项 (read more)。

.container {
  display: grid;
  grid-template-columns: 1fr repeat(4, minmax(min-content, 150px)) 1fr;
  border: 2px solid black;
  height: 100vh;
}

.nav {
  grid-area: 1 / 2 / 2 / span 4;
  height: 50px;
  background-color: grey;
  border: 1px solid red;
  position: relative;
}

.container::before {
  grid-area: 1 / 1 / 2 / 2;
  content: "";
  background-color: grey;
  height: 50px;
}

.container::after {
  grid-area: 1 / -1 / 2 / -2;
  background-color: grey;
  height: 50px;
  content: "";
}

.content {
  grid-area: 2 / 2 / 2 / span 4;
  height: 200px;
  background-color: grey;
  border: 1px solid red;
}

<body class="container">
  <div class="nav">this box should stay aligned with the content box</div>
  <div class="content">Content box</div>
</body>

jsFiddle demo