是否可以继承/使用父级的列模板？

Question

我想将子元素的元素放到其父网格中。

一种方法是让孩子使用带有grid-column: 1/4 的所有列，然后使用与父母相同的规则。这将制作几行网格布局。所以最终的结果会很差。

.parent-wrapper {
  display: grid;
  grid-template-columns: auto auto auto;
}

.child-wrapper {
  /* make it inherit from parent  */
  /* so that it displays as..:    */
  /* Item A ... Item B ... Item C */
}

.child-wrapper-attempt {
  grid-column: 1/4;
  display: grid;
  grid-template-columns: auto auto auto;
}

<h3>Problem..</h3>
<div class="parent-wrapper">
  <div>Header A</div>
  <div>Header B</div>
  <div>Header C</div>
  <div class="child-wrapper">
    <div>Item A</div>
    <div>Item B</div>
    <div>Item C</div>
  </div>
</div>

<br>
I'd like to make it display as..
<p>Item A  ... Item B ... Item C</p>
Aligned with the headers..

<hr>

<h3>attempt...</h3>
<div class="parent-wrapper">
  <div>Header A</div>
  <div>Header B</div>
  <div>Header C</div>
  <div class="child-wrapper-attempt">
    <div>Item A</div>
    <div>Item B</div>
    <div>Item C</div>
  </div>
  <div class="child-wrapper-attempt">
    <div>Different lenghts of</div>
    <div>content..</div>
    <div>and see what happens..</div>
  </div>
</div>

更新 - 响应：auto vs fr

更新 2. 子网格，就是我要找的。但很遗憾目前无法使用。

我将保持这个问题的开放性，尽管对于我的具体情况，我使用<ng-container>，这样它使用相同的网格布局。然而，问题在于，点击、悬停等操作会变得稍微复杂一些。

<div class="parent-wrapper">
  <div>Header A</div>
  <div>Header B</div>
  <div>Header C</div>
  <ng-container *ngFor="let item of items | async">
    <div>{{item.a}}</div>
    <div>{{item.b}}</div>
    <div>{{item.c}}</div>
  </ng-container>
</div>

Answer 1

未对齐是由auto 值引起的。请改用1fr。

.parent-wrapper {
  display: grid;
  grid-template-columns: auto auto auto;
}

.child-wrapper {
  /* make it inherit from parent  */
  /* so that it displays as..:    */
  /* Item A ... Item B ... Item C */
}

.child-wrapper-attempt {
  grid-column: 1/4;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* adjustment */
}

div:not(.parent-wrapper):not(.child-wrapper):not(.child-wrapper-attempt) {
  border: 1px dashed red;
}

<h3>Problem..</h3>
<div class="parent-wrapper">
  <div>Header A</div>
  <div>Header B</div>
  <div>Header C</div>
  <div class="child-wrapper">
    <div>Item A</div>
    <div>Item B</div>
    <div>Item C</div>
  </div>
</div>

<br>
I'd like to make it display as..
<p>Item A  ... Item B ... Item C</p>
Aligned with the headers..

<hr>

<h3>attempt...</h3>
<div class="parent-wrapper">
  <div>Header A</div>
  <div>Header B</div>
  <div>Header C</div>
  <div class="child-wrapper-attempt">
    <div>Item A</div>
    <div>Item B</div>
    <div>Item C</div>
  </div>
  <div class="child-wrapper-attempt">
    <div>Different lenghts of</div>
    <div>content..</div>
    <div>and see what happens..</div>
  </div>
</div>