Каков наилучший способ использования контейнера в CSS Grid?

Question

Я хочу добиться следующего макета в CSS Grid.

Обратите внимание, что строка "C" имеет синий фон полной ширины , но содержимое внутри нее обернуто, а не полной ширины.Но я не знаю, какой самый оптимальный способ достижения этого?

Вот мой код:

container {
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
  grid-template-areas:
    "A A A A"
    ". B B ."
    "C C C C"
    ". D D .";
}

То, что я пробовал:

1. Я пробовал 16,66% заполнения в обе стороны для строки"C".

2. Я пытался сделать строку C самой сеткой.Внутри него были бы столбцы 0.5fr, 1fr, 1fr, 0.5fr.Но это много повторяющегося кода и много работы для простой вещи.

Какой подход CSS Grid подходит для этого?Все учебники, которые я видел, похоже, не охватывают этот особый случай.

Answer 1

Один из вариантов - сделать C span двумя столбцами в центре, которые соответствуют вашему макету, и использовать псевдоэлемент , который заботится о фоне

• добавьте grid-row: 3 и grid-column: 1 / -1 к псевдоэлементу , чтобы поместить его в то же положение, что и C, но охватывая всю ширину

• сдвиньте его назад, используя z-index: -1 и position: relative

См. Демо ниже:

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper{
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
  grid-template-areas:
    "A A A A"
    ". B B ."
    ". C C ."
    ". D D .";
  height: 100vh;
}

.wrapper:after {
  content: '';
  display: block;
  grid-column: 1 / -1;
  grid-row: 3;
  background: cadetblue;
  position: relative;
  z-index: -1;
}

.A {
  grid-area: A;
  background: pink;
  
}
.B {
  grid-area: B;
  background: orange;
}

.C {
  grid-area: C;
  background: lightgreen;
}

.D {
  grid-area: D;
  background: orange;
}

<div class="wrapper">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
</div>

Answer 2

Поскольку вы хотите, чтобы ваш элемент имел 2fr и 0.5fr с обеих сторон, это означает, что ваши элементы (B и D) будут иметь ширину, равную 2*100%/3, и будут центрированы для ваш элемент C вы можете применить отступ внутри, чтобы подтолкнуть содержимое в середине.

Вы можете упростить свой код без использования CSS-сетки, как показано ниже:

body {
  margin: 0;
}

.A {
  background: pink;
  min-height: 40px;
}

.B,
.D {
  width: calc(2*100%/3);
  background: orange;
  margin: auto;
  min-height: 100px;
}

.C {
  background: lightgreen;
  padding: 0 calc(100%/6);
  min-height: 70px;
}

<div class="A">content inside A</div>
<div class="B">content inside B</div>
<div class="C">content inside C</div>
<div class="D">content inside D</div>