title: Angular FlexLayout - wrap does not work with gap
body: <p>i want to display my form fields as follows.</p>
  <p><a href="https://i.stack.imgur.com/B8xHV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B8xHV.png" alt="enter image description here" /></a></p>
  <p>When I use <strong>fxLayout=&quot;row wrap&quot;</strong> and <strong>fxLayoutGap=&quot;20px&quot;</strong>, the form fields and also the div containers are shifted.</p>
  <pre><code>&lt;div fxLayout=&quot;row wrap&quot; fxLayoutGap=&quot;20px&quot;&gt;
    &lt;div style=&quot;background-color: lightgoldenrodyellow; height: 100px&quot; fxFlex&gt;HelloWorldHelloWorldHelloWorld&lt;/div&gt;
    &lt;div style=&quot;background-color: lightcoral; height: 100px;&quot; fxFlex&gt;HelloWorldHelloWorldHelloWorld&lt;/div&gt;
    &lt;div style=&quot;background-color: lightblue; height: 100px;&quot; fxFlex&gt;HelloWorldHelloWorldHelloWorld&lt;/div&gt;
    &lt;div style=&quot;background-color: lightgreen; height: 100px;&quot; fxFlex&gt;HelloWorldHelloWorldHelloWorld&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div style=&quot;height: 40px&quot;&gt;&lt;/div&gt;
  
  &lt;div fxLayout=&quot;row wrap&quot; fxLayoutGap=&quot;20px&quot;&gt;
    &lt;mat-form-field appearance=&quot;fill&quot; fxFlex&gt;
      &lt;mat-label&gt;Field 1&lt;/mat-label&gt;
      &lt;input matInput type=&quot;number&quot;&gt;
    &lt;/mat-form-field&gt;
    &lt;mat-form-field appearance=&quot;fill&quot; fxFlex&gt;
      &lt;mat-label&gt;Field 2&lt;/mat-label&gt;
      &lt;input matInput type=&quot;number&quot;&gt;
    &lt;/mat-form-field&gt;
    &lt;mat-form-field appearance=&quot;fill&quot; fxFlex&gt;
      &lt;mat-label&gt;Field 3&lt;/mat-label&gt;
      &lt;input matInput type=&quot;number&quot;&gt;
    &lt;/mat-form-field&gt;
    &lt;mat-form-field appearance=&quot;fill&quot; fxFlex&gt;
      &lt;mat-label&gt;Field 4&lt;/mat-label&gt;
      &lt;input matInput type=&quot;number&quot;&gt;
    &lt;/mat-form-field&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/EoPST.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EoPST.png" alt="enter image description here" /></a></p>
  <p>When I use <strong>fxLayout=&quot;row wrap&quot;</strong> and <strong>fxLayoutGap=&quot;20px grid&quot;</strong>, the div containers no longer have a gap. The form fields have both a horizontal gap and a vertical one. However, I do not want the vertical gap.</p>
  <pre><code>&lt;div fxLayout=&quot;row wrap&quot; fxLayoutGap=&quot;20px grid&quot;&gt;
    &lt;div style=&quot;background-color: lightgoldenrodyellow; height: 100px&quot; fxFlex&gt;HelloWorldHelloWorldHelloWorld&lt;/div&gt;
    &lt;div style=&quot;background-color: lightcoral; height: 100px;&quot; fxFlex&gt;HelloWorldHelloWorldHelloWorld&lt;/div&gt;
    &lt;div style=&quot;background-color: lightblue; height: 100px;&quot; fxFlex&gt;HelloWorldHelloWorldHelloWorld&lt;/div&gt;
    &lt;div style=&quot;background-color: lightgreen; height: 100px;&quot; fxFlex&gt;HelloWorldHelloWorldHelloWorld&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div style=&quot;height: 40px&quot;&gt;&lt;/div&gt;
  
  &lt;div fxLayout=&quot;row wrap&quot; fxLayoutGap=&quot;20px grid&quot;&gt;
    &lt;mat-form-field appearance=&quot;fill&quot; fxFlex&gt;
      &lt;mat-label&gt;Field 1&lt;/mat-label&gt;
      &lt;input matInput type=&quot;number&quot;&gt;
    &lt;/mat-form-field&gt;
    &lt;mat-form-field appearance=&quot;fill&quot; fxFlex&gt;
      &lt;mat-label&gt;Field 2&lt;/mat-label&gt;
      &lt;input matInput type=&quot;number&quot;&gt;
    &lt;/mat-form-field&gt;
    &lt;mat-form-field appearance=&quot;fill&quot; fxFlex&gt;
      &lt;mat-label&gt;Field 3&lt;/mat-label&gt;
      &lt;input matInput type=&quot;number&quot;&gt;
    &lt;/mat-form-field&gt;
    &lt;mat-form-field appearance=&quot;fill&quot; fxFlex&gt;
      &lt;mat-label&gt;Field 4&lt;/mat-label&gt;
      &lt;input matInput type=&quot;number&quot;&gt;
    &lt;/mat-form-field&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/c9MWz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c9MWz.png" alt="enter image description here" /></a></p>