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

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>

更新 - 响应：自动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>