<mat-grid-list cols="2" rowHeight="45%">
  <!-- Stocks -->
  <mat-grid-tile colspan="1" rowspan="2">
    <div class="stockOverview">
      <div class="heading">
        <div class="vertical-center">Stocks</div>
      </div>
      <mat-card class="placeholder">
        <div class="stockTableLHS">
          <table mat-table [dataSource]="dataSourceStocks">
            <!--- Note that these columns can be defined in any order.
                The actual rendered columns are set as a property on the row definition" -->

            <!-- Symbol Column -->
            <ng-container matColumnDef="position">
              <th mat-header-cell *matHeaderCellDef>Symbol</th>
              <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
            </ng-container>

            <!-- Count Column -->
            <ng-container matColumnDef="name">
              <th mat-header-cell *matHeaderCellDef>Count</th>
              <td mat-cell *matCellDef="let element">{{ element.count }}</td>
            </ng-container>

            <!-- Time Column -->
            <ng-container matColumnDef="weight">
              <th mat-header-cell *matHeaderCellDef>Time</th>
              <td mat-cell *matCellDef="let element">{{ element.time }}</td>
            </ng-container>

            <!-- Time Column -->
            <ng-container matColumnDef="current-price">
              <th mat-header-cell *matHeaderCellDef>Current Price</th>
              <td mat-cell *matCellDef="let element">
                {{ element.currentPrice }}
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumnsStocks"></tr>
            <tr
              mat-row
              *matRowDef="let row; columns: displayedColumnsStocks"
            ></tr>
          </table>
        </div>
      </mat-card>
    </div>
  </mat-grid-tile>
  <!-- Depot Overview -->
  <mat-grid-tile colspan="1" rowspan="1" class="right-side">
    <div class="depotOverview">
      <div class="heading fix-right-side">
        <div class="vertical-center">Depot</div>
      </div>
      <mat-card class="placeholderRHS content-container">
        <div class="content">
          <div class="row">
            <div class="col-md-4">
              <div class="value-set">
                <h3>Portfolio Value</h3>
              </div>
            </div>
            <div class="col-md-4">
              <div class="value-set">
                <h3>Portfolio Cost</h3>
              </div>
            </div>
            <div class="col-md-4">
              <div class="value-set">
                <h3>Portfolio Profit</h3>
              </div>
            </div>
          </div>
          <br />
          <div class="row">
            <div class="col-6 col-sm-4">
              <mat-icon>savings</mat-icon
              ><span class="money">{{ depotCurrentValue.toFixed(2) }}</span>
            </div>
            <div class="col-6 col-sm-4">
              <mat-icon>paid</mat-icon
              ><span class="money">{{ depotCost.toFixed(2) }}</span>
            </div>
            <div class="col-6 col-sm-4">
              <mat-icon>account_balance</mat-icon
              ><span
                class="money"
                [ngClass]="{ green: profit >= 0, red: profit < 0 }"
                >{{ profit.toFixed(2) }}</span
              >
            </div>
          </div>
        </div>
      </mat-card>
    </div>
  </mat-grid-tile>
  <!-- Transaktions -->
  <mat-grid-tile colspan="1" rowspan="1" class="right-side">
    <div class="depotOverviewDown">
      <div class="heading fix-right-side">
        <div class="vertical-center">Transactions</div>
        <span class="spacer"></span>
        <button
          mat-icon-button
          class="add-icon"
          aria-label="Example icon-button with heart icon"
          [disableRipple]="true"
          (click)="openDialog()"
        >
          <mat-icon>add</mat-icon>
        </button>
      </div>
      <mat-card class="placeholderRHS"
        ><div class="stockTable">
          <table mat-table [dataSource]="dataSourceTransactions">
            <!--- Note that these columns can be defined in any order.
                The actual rendered columns are set as a property on the row definition" -->

            <!-- Position Column -->
            <ng-container matColumnDef="position">
              <th mat-header-cell *matHeaderCellDef>Count</th>
              <td mat-cell *matCellDef="let element">{{ element.count }}</td>
            </ng-container>

            <!-- Comment Column -->
            <ng-container matColumnDef="comment">
              <th mat-header-cell *matHeaderCellDef>Comment</th>
              <td mat-cell *matCellDef="let element">{{ element.comment }}</td>
            </ng-container>

            <!-- Name Column -->
            <ng-container matColumnDef="name">
              <th mat-header-cell *matHeaderCellDef>Price</th>
              <td mat-cell *matCellDef="let element">{{ element.price }}</td>
            </ng-container>

            <!-- Weight Column -->
            <ng-container matColumnDef="weight">
              <th mat-header-cell *matHeaderCellDef>ISIN</th>
              <td mat-cell *matCellDef="let element">{{ element.isin }}</td>
            </ng-container>

            <!-- Symbol Column -->
            <ng-container matColumnDef="symbol">
              <th mat-header-cell *matHeaderCellDef>Time</th>
              <td mat-cell *matCellDef="let element">{{ element.time }}</td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
          </table></div
      ></mat-card>
    </div>
  </mat-grid-tile>
</mat-grid-list>

./dashboard.component.scss

// left gird
.stockOverview {
  height: 100%;
  width: 100%;
  margin-top: 10%;
  margin-left: 10%;
}

//right grids
.depotOverview {
  height: 100%;
  width: 100%;
  margin-top: 10%;
  margin-left: 5%;
  margin-right: 10%;
  text-align: center;
}

.depotOverviewDown {
  height: 100%;
  width: 100%;
  margin-left: 5%;
  margin-right: 10%;
}

.stockTable {
  overflow: auto;
  height: 100%;
  width: 100%;
}

.stockTableLHS {
  overflow: auto;
  height: 83%;
  width: 100%;
}

.heading {
  font-size: xx-large;
  height: 10%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fix-right-side {
  height: 20%;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.spacer {
  flex-grow: 1;
}

.add-icon {
  transform: scale(2);
  outline: none !important;
}

.right-side {
  margin-left: 2.5%;
}

table {
  width: 100%;
}

.placeholder {
  height: 100%;
}

.placeholderRHS {
  height: 80%;
}

.mat-ripple-element {
  display: none !important;
}

.money {
  margin-left: 2vw;
}

.green {
  color: green;
}

.red {
  color: red;
}

.row {
  height: 20%;
}

.content {
  height: inherit;
}

.content-container {
  width: 100%;
  display: grid;
  align-items: center;
}