Расширение фона за пределы области сетки

Question

Я создал шаблон, используя CSS сетку:

main {
  display: grid;
  grid-template-areas: '. content .' '. other-content .';
  grid-template-columns: 1fr 15em 1fr;
  grid-row-gap: 1em;
}

.content {
  background-color: blue;
  grid-area: content;
}

.content-bg-left,
.content-bg-right {
  background-color: blue;
}

.content-without-expanded-bg {
  background-color: green;
  grid-area: other-content;
}

<main>
  <div class="content-bg-left"></div>
  <div class="content">
    Something inside here
  </div>
  <div class="content-bg-right"></div>
  <div class="content-without-expanded-bg">
    Something else here
  </div>
</main>

Что мне не нравится в приведенной выше настройке, так это то, что вокруг висят пустые элементы. Можно ли расширить фон для элемента .content без необходимости использования пустых элементов .content-bg-left и content-bg-right? Я по-прежнему хочу, чтобы .content оставался посередине, поэтому добавление grid-column: 1/-1; не вариант.

Answer 1

Не требуется дополнительных HTML элементов. Никаких хаков.

CSS псевдоэлементы в контейнере обрабатываются как элементы сетки.

Просто добавьте это в свой код:

main::before,
main::after {
  background-color: blue;
  content: "";
}

main {
  display: grid;
  grid-template-areas: '. content .' '. other-content .';
  grid-template-columns: 1fr 15em 1fr;
  grid-row-gap: 1em;
}

.content {
  grid-area: content;
  background-color: aqua;
}

main::before,
main::after {
  background-color: aqua;
  content: "";
}

.content-without-expanded-bg {
  grid-area: other-content;
  background-color: lightgreen;

}

<main>
  <div class="content">
    Something inside here
  </div>
  <div class="content-without-expanded-bg">
    Something else here
  </div>
</main>

Answer 2

Ваше решение довольно хорошее. Мы можем избавиться от лишних div, просто заменив их на ::before и ::after. Это решение больше похоже на взлом, но оно работает для этой задачи.

main {
  display: grid;
  grid-template-areas: '. content .' '. other-content .';
  grid-template-columns: 1fr 15em 1fr;
  grid-row-gap: 1em;
  overflow: hidden;
}

.content {
  background-color: blue;
  grid-area: content;
  position: relative;
}

.content::before,
.content::after {
  content: '';
  background-color: blue;
  position: absolute;
  width: 9999px;
  height: 100%;
  top: 0;
}

.content::before {
  right: 100%;
}

.content::after {
  left: 100%;
}

.content-without-expanded-bg {
  background-color: green;
  grid-area: other-content;
}

<main>
  <div class="content">
    Something inside here
  </div>
  <div class="content-without-expanded-bg">
    Something else here
  </div>
</main>