Question

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

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

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

是否有使用 CSS网格布局的更好方法？

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

请将代码段扩展到整页，以便正确显示布局

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

跨视口宽度的跨度背景颜色

1 个答案:

jsFiddle demo