CSS＆Angular：针对不同孩子的不同行为风格

Question

这是一个普遍的问题，因此该示例仅用于演示！

假设我有一个父div，并且在Angular应用中有两个孩子。

<div class="parentDiv">
     <div class="child1"></div>
     <div class="child2"></div>
</div>

，我在父级为grid-template-columns: 50% 50%;设置了网格样式，效果很好。 但有时child2被child3取代，所以我不希望父母拥有grid-template-columns: 50% 50%;而不是像grid-template-rows: 50% 50%;这样的不同规则 如何控制父项依赖于子项类的规则？