親の列テンプレートを継承/使用できますか？

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>

アップデート - レスポンス：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>