Question

如何使多个元素跨越视口宽度并应用特定的背景颜色，同时中心列的宽度与不占据视口整个宽度的其他元素的宽度相同。这必须使用 CSS网格系统完成。

我之前问过类似的question，但这是关于如何在单个元素上进行的。答案很好，但是我不能将其应用于其他元素。

我需要的是一种将其应用于多个元素的方法，并且必须得到现代浏览器的支持。

到目前为止，我想出了这个解决方案，但我认为它不够优雅，无法用于生产，因为我使用了其他<div>元素来重叠。

.container {
  display: grid;
  grid-template-columns: 1fr repeat(4, minmax(min-content, 150px)) 1fr;
  grid-row-gap: 20px;
}

/*positioning*/

.span__across-1 {
  grid-area: 1 / 2 / 1 / span 4;
}

.span__across-underlay-1 {
  grid-area: 1 / 1 / 1 / span 7;
}

.content-1 {
  grid-area: 2 / 2 / 2 / span 4;
}

.span__across-2 {
  grid-area: 3 / 2 / 3 / span 4;
}

.span__across-underlay-2 {
  grid-area: 3 / 1 / 3 / span 7;
}

.content-2 {
  grid-area: 4 / 2 / 4 / span 4;
}

/*decoration*/

.span__across,
.span__across-underlay,
.content {
  background-color: grey;
  height: 50px;
}

.span__across,
.content {
  border: 1px solid red;
  position: relative;
}

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

或检查此jsFiddle：https://jsfiddle.net/lenny86/q9s3r80t/15/

跨视口宽度的多个元素-CSS GRID

0 个答案: