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

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 与 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>