Create a responsive dashboard - Angular

Question

I am trying to create a dashboardw the below layout:

I am using mat-card and have done the following:

<mat-card class="outer-card fadeInDown" style="max-width:50%;">
.
.
.
.
.
</mat-card>



<mat-card class="outer-card fadeInDown" style="max-width:50%;">
.
.
.
.
.
</mat-card>

Thank you

Answer 1

I am assuming you are using ngx-bootstrap as well. So, you can use something like this:

<div class="row">
    <div class="col-6">
        <div class="row>
            <div class="col-12">
                <mat-card><!-- your code --></mat-card>
            </div>
        </div>
        <div class="row>
            <div class="col-12">
                <mat-card><!-- your code --></mat-card>
            </div>
        </div>
    </div>
    <div class="col-6">
        <mat-card><!-- your code --></mat-card>
    </div>
</div>