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?

Hardspun

have you looked into using bootstrap? the bootstrap grid would be ideal for this – Turkestan

No, it's the same result whether I go with css or scss. I don't want to use Bootstrap. – Hardspun

the bootstrap grid is literally designed for doing column stuff, its light and efficient – Turkestan

There is no need to add bootstrap for a simple css grid. – Ivory

here, Angular 7 and CSS Grid is used, don't suggest frameworks to be used by the OP... if you know how to solve the question as it is, tell OP that... – Whiplash

OP, on my end, the stackblitz doesn't have any issue, did you happen to resolve it ? – Lizalizabeth

Why not enclosed your router-outlet between a <div class="main"> and add class to .main (not [main])? – Overreach

I guess the OP's problem is that he thinks router-outlet has content, instead, all the router-driven templates are rendered next to router-outlet. This is by Angular design and this is what one should consider while using CSS flex and grid. – Calamondin

You can't apply CSS styles to child web components that have view encapsulation enabled. – Miscount

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

Ivory

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.

Playlet

Thanks! very simple and elegant solution. I was trying to deal with router-outlet added adding the content element next to it, which was screwing up my grids. Your solution solved my grid issues, thanks! – Scaliger

Any specific reason you used main as a custom attribute opposed to the <main> html-tag? – Loeffler

As @RobMonhemius I am also interested in why you used main as a custom attribute opposed to the <main> html-tag. Anyway good answer. This layout also can be done just with Flex. – Taiga

It's been awhile since I looked at this question, but I believe that main attribute came from OP. My stackblitz was merely a fork and I intended to make a few changes as possible while solving the problem. You can see how it's being used in the CSS. Personally, I would have just used a simple class. – Playlet

Answer 3

I don't see any reason not to globally define:

router-outlet
{
   display: none;
}

The actual Component element gets added after router-outlet, but there's never anything visible inside router-outlet itself.

Mineral