一个元素可以占据一个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: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>

Answer 2

将来通过定义display：class .a ...中的subgrid可以很好地工作。 但是支持仍然非常有限。 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>