Use @angular/flex-layout as a grid layout

Question

I'm trying to create a grid-layout like using flex-layout provided by the Angular team.

Here's what I want :

Here's what I have :

I'm trying to do it with only one row that has the wrap parameter, so it's more flexible :

<div class="widgets-row"
 fxLayout
 fxLayout.xs="column"
 fxLayoutAlign="start"
 fxLayoutWrap="wrap">
<div class="widget" fxFlex="100%">Large</div>
<div class="widget" fxFlex="50%">Medium</div>
<div class="widget widget-sm" fxFlex="25%">
    Small
</div>
<div class="widget widget-sm" fxFlex="25%">
    Small
</div>
<div class="widget widget-sm" fxFlex="25%">
    Small
</div>
<div class="widget widget-sm" fxFlex="25%">
    Small
</div>

Basically I need the last row to wrap below the 2 other "small".

Thanks.

Answer 1

I managed to do it by creating several layouts, one for large widgets, one for medium ones and a nested one for the small :

<div class="widgets-row"
    fxLayout
    fxLayout.xs="column"
    fxLayoutAlign="start"
    fxLayoutWrap="wrap">
    <div class="widget" fxFlex="100%">Large</div>
</div>

<div fxLayout
    fxLayout.xs="column"
    fxLayoutAlign="space-between"
    fxLayoutWrap="wrap">
    <div fxFlex="49%" class="widget"></div>
    <div fxLayout
        fxLayout.xs="column"
        fxLayoutWrap="wrap"
        fxLayoutAlign="space-around"
        fxFlex="49%">
        <div class="widget-sm" fxFlex="49%">Small</div>
        <div class="widget-sm" fxFlex="49%">Small</div>
        <div class="widget-sm" fxFlex="49%">Small</div>
        <div class="widget-sm" fxFlex="49%">Small</div>
    </div>
</div>

PS : The 49% Flex in the second layout is in order to have some space between the widgets so they're not sticked together.