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

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>