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

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>