несколько элементов, охватывающих ширину области просмотра - CSS GRID - PullRequest
Новая
       17

несколько элементов, охватывающих ширину области просмотра - CSS GRID

0 голосов
/ 13 ноября 2018

Как сделать, чтобы несколько элементов перекрывали ширину области просмотра и применяли определенный цвет фона, в то время как ширина центральных столбцов совпадает с шириной других элементов, которые не занимают всю ширину области просмотра. Это должно быть сделано с использованием системы CSS Grid .

Я задавал похожий вопрос и раньше, но это было о том, как это сделать на одном элементе . Ответ отличный, но я не могу применить это к другим элементам.

Мне нужен способ применить это к нескольким элементам и должен поддерживаться современными браузерами.

До сих пор я придумал это решение, но я не думаю, что оно достаточно элегантно, чтобы его можно было использовать для производства, поскольку я использовал другие элементы <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/

...