I am trying to create a layout similar to one done by angular material schematic for dashboard but using the angular flexlayout.

**Dashboard example**
[![enter image description here](https://i.stack.imgur.com/OLjIt.png)](https://i.stack.imgur.com/OLjIt.png)

So far I got to:

```
<div fxFlex="66" fxFlexOffset="15" fxLayout="row" fxLayoutGap="0.5%">
      <div fxFlex="100%">
            <mat-card>
                  // content
            </mat-card>
      </div>
      <div fxFlex="50%">
            <mat-card>
                  // content
            </mat-card>
      </div>
      <div fxFlex="50%">
            <mat-card>
                  // content
            </mat-card>
      </div>
</div>

```

Which results in this:
[![enter image description here](https://i.stack.imgur.com/9OwBo.jpg)](https://i.stack.imgur.com/9OwBo.jpg)

It's doing my head in trying to figure it out.