Может ли элемент занимать одну строку сетки CSS, а подэлемент - одну из ячеек строки?

Question

Я бы хотел добиться следующего эффекта:

.wrap {
  display: grid;
  grid-template: 2rem 10rem / auto 20rem auto;
}

.a {
  background: orange;
  grid-column: 1 / 4;
  grid-row: 1;
}

.b {
  background: green;
  grid-column: 2;
  grid-row: 1;
}

.c {
  background: lightblue;
  grid-column: 1 / 4;
  grid-row: 2;
  
}

  <div class="wrap">
    <div class="a"></div>
    <div class="b">Title</div>
    <div class="c">This is section C.</div>
  </div>

, но вместо этого используется следующий HTML:

  <div class="wrap">
    <div class="a"><div class="b">Title</div></div>
    <div class="c">This is section C.</div>
  </div>

, где .b находится внутри .a.

Другими словами, я бы хотел, чтобы элемент .a занимал верхнюю строку сетки CSS, но имел один из его подэлементов, .b, чтобы занимать только среднюю ячейку этой же строки сетки CSS. Это возможно?

Answer 1

Это будет хорошо работать в будущем, определив display: subgrid в классе .a ... Но поддержка все еще очень ограничена. https://gridbyexample.com/video/subgrid-display-contents/

.wrap {
  display: grid;
  grid-template: 2rem 10rem / auto 20rem auto;
}

.a {
  background: orange;
  grid-column: 1 / 4;
  grid-row: 1;
  display: subgrid;
}

.b {
  background: green;
  grid-column: 2;
  grid-row: 1;
}

.c {
  background: lightblue;
  grid-column: 1 / 4;
  grid-row: 2;
  
}

  <div class="wrap">
    <div class="a">
    <div class="b">Title</div></div>
    <div class="c">This is section C.</div>
  </div>

Answer 2

Применить display:grid и grid-template: 2rem 10rem / auto 20rem auto; к a, отметьте

.wrap {
  display: grid;
  grid-template: 2rem 10rem / auto 20rem auto;
}

.a {
  background: orange;
  grid-column: 1 / 4;
  grid-row: 1;
  display: grid;
  grid-template: 2rem 10rem / auto 20rem auto;
}

.b {
  background: green;
  grid-column: 2/ 3;
  grid-row: 1;
}

.c {
  background: lightblue;
  grid-column: 1 / 4;
  grid-row: 2;
  
}

 <div class="wrap">
    <div class="a"><div class="b">Title</div></div>
    <div class="c">This is section C.</div>
  </div>