How to adjust angular components from router-module with an existing css grid

Question

I have this angular reactive-form project. I have done everything but routing. I specified all the routes I need in an app.module.ts file and after that all went bonkers. In my basic form I had a responsive css grid with two colums that fit the form neatly, before I add an there. It seems that router outlet adds itself as an item to the grid. and my component that should be rendered creates an additional grid-row, which brakes the whole layout.

How can I fix that?

Here is my template:

<div class="container">
  <div class="wrapper">
    <app-form-slider></app-form-slider>
    <router-outlet></router-outlet>
  </div>
</div>

Here is my app.module:

const routes: Routes = [
  {path: '', redirectTo: '/form', pathMatch: 'full'},
  {path: 'form', component: FormComponent},
  {path: 'logined-user', component: FormLoginedUserComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    FormComponent,
    FormLoginedUserComponent,
    FormSliderComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    IMaskModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And this is my scss template:

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

.wrapper {
    margin-right: auto;
    margin-left: auto;
    display: grid;
    height: 100vh;
    width: 95vw;


    @media (min-width: 700px) {
        display: grid;
        grid-template-columns: 160px 2fr;
        width: 1000px;
        height: 95vh;
    }
}

app-form {
    background-color: #fff;
    grid-column: 1 / 3;
    @media screen and (min-width: 700px){
        grid-column: 2/3;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    &-slider {
        grid-column: 1 / 3;
        background-color: #48a5ea;
        @media screen and (min-width: 700px){
            grid-column: 1/2;
            height: 100%;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        height: 20vh;

    }
}

Answer 1

If wrap it you can control the space available for it

<div class="container">
  <div class="wrapper">
    <div class="col-5">
       <app-form-slider></app-form-slider>
    </div>
    <div class="col-7">
       <router-outlet></router-outlet>
    </div>
  </div>
</div>

here I'm using bootstrap as example but you get what I did. Now app-form-slider has 5 columns and anything you throw using your routes router-outlet will have to fit in 7 cols.