Is it possible to inherit/use s parent's column template?

Question

I'd like to place the elements from the child onto its parent's grid.

One way would be to make the child use all the columns with grid-column: 1/4 and then the same rules as the parents. This will make several rows of grid layouts. So the end result would be poorly aligned.

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

Update - response: auto vs fr

Update 2. Subgrid, is what I'm looking for. but unfortunately not usable at the moment.

I'll keep this question open, although for my specific case, I worked around with the <ng-container>, this way it uses the same grid layout. The problem however, is that things like clicking, hovering, becomes slightly more complicated doing this way.

<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

The misalignment is caused by the auto value. Try 1fr instead.

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