title: Use @angular/flex-layout as a grid layout
body: <p>I'm trying to create a grid-layout like using flex-layout provided by the Angular team.</p>
  
  <p>Here's what I want :</p>
  
  <p><a href="https://i.stack.imgur.com/OsCYS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OsCYS.png" alt="Mockup"></a></p>
  
  <p>Here's what I have :</p>
  
  <p><a href="https://i.stack.imgur.com/d1iZo.png" rel="noreferrer"><img src="https://i.stack.imgur.com/d1iZo.png" alt="Result"></a></p>
  
  <p>I'm trying to do it with only one row that has the <code>wrap</code> parameter, so it's more flexible :</p>
  
  <pre><code>&lt;div class="widgets-row"
   fxLayout
   fxLayout.xs="column"
   fxLayoutAlign="start"
   fxLayoutWrap="wrap"&gt;
  &lt;div class="widget" fxFlex="100%"&gt;Large&lt;/div&gt;
  &lt;div class="widget" fxFlex="50%"&gt;Medium&lt;/div&gt;
  &lt;div class="widget widget-sm" fxFlex="25%"&gt;
      Small
  &lt;/div&gt;
  &lt;div class="widget widget-sm" fxFlex="25%"&gt;
      Small
  &lt;/div&gt;
  &lt;div class="widget widget-sm" fxFlex="25%"&gt;
      Small
  &lt;/div&gt;
  &lt;div class="widget widget-sm" fxFlex="25%"&gt;
      Small
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Basically I need the last row to wrap below the 2 other "small".</p>
  
  <p>Thanks.</p>