How to get Angular's <router-outlet> to work with CSS Grid

Question

I'm trying to create a layout with Angular 7 and CSS Grid. The problem I have is that the router-outlet only takes up one column in the second row.

I have created a StackBlitz here .

As you can see in app.component.css I want router-outlet (and any of its content) to take up grid-column: 2 / 5 , as of now it takes up 2 / 3.

Is what I'm trying to achieve possible?

Answer 1

<router-outlet> has no size and does not have any content in it, the actual router content is the next element to it. Remove the styles from <router-outlet> and only apply it to the next element to that and you should be fine.

Also, your app.component tries to apply styles to components that are not included in your component. You have to specify this explicitly by using ViewEncapsulation.None in the component definition. See here: https://stackblitz.com/edit/angular-lmpnkl

Answer 2

I think the problem is that you are trying to apply the style directly to <router-outlet> . Instead, create a "main div" element and put the router outlet inside of it.

<app-header></app-header>
<app-navbar></app-navbar>
<div main>
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

I've updated your stackblitz to demonstrate.