He definido los estilos de un componente principal angular usando la cuadrícula css y quiero que el componente secundario se extienda a lo largo de las 5 columnas. Aunque se aplican otros estilos en el componente secundario, el componente secundario no se extiende desde la columna 4 hasta la columna 99 (definida en el archivo css).

Aquí está el código para el componente principal

 .parent-comp { display: grid; grid-template-columns: repeat(12, 1fr); } ::ng-deep .child-comp { grid-column-start: 4; grid-column-end: 9; background: red; }

 <div class="parent-comp"> <app-child></app-child> </div>

Componente hijo

 <p class="child-comp"> child works! </p>

Tengo entendido que el componente secundario debe comenzar en la columna 4 del elemento principal y terminar en la línea de inicio de la columna 9. Pero esto no funciona según tengo entendido. Por favor, ayúdame a entender mi error y cómo puedo solucionarlo.

apilar