如何让Angular子组件撑满父组件定义的CSS Grid指定列范围

• CSS Grid 的跨列属性grid-column-start/grid-column-end仅对网格容器的直接子元素生效，你当前的网格容器是父组件里的.parent-comp，它的直接子元素是<app-child>自定义标签，而非子组件内部的.child-comp段落标签。
• 你通过::ng-deep给子组件内部的.child-comp加的跨列规则，只会作用在它的直接父容器（也就是<app-child>标签）的布局上下文中，而<app-child>默认只占用网格的1列宽度，自然无法实现跨5列的效果。

推荐使用方案1，无需用到已被Angular弃用的::ng-deep语法，逻辑更清晰：

方案1：直接给网格直接子元素<app-child>设置跨列属性 #

修改父组件CSS即可，删除原有的::ng-deep规则：

.parent-comp {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

/* 给网格容器的直接子元素app-child设置跨列 */
.parent-comp app-child {
  grid-column: 4 / 9;
}

子组件的背景色等样式可以直接写在子组件自身的CSS文件中，和跨列规则完全解耦。

方案2：穿透子组件宿主元素 #

如果确实需要把子组件内部的元素作为父网格的直接子项，可以在子组件的CSS中添加如下规则，让宿主元素不参与布局，直接透传内部元素到父级网格上下文：

/* 子组件CSS */
:host {
  display: contents;
}

该方案下你原有写在父组件的::ng-deep .child-comp跨列规则可以正常生效，但不推荐长期依赖::ng-deep语法。

内容的提问来源于stack exchange，提问作者brk