title: 4 Column maximum per row Angular Material 2 FlexLayout
body: <p>I have a problem with Angular Material 2 and flexLayout, I didn't understand something : how to start a new row after 4 columns ?</p>
  
  <p>I would like something like this :</p>
  
  <p><a href="https://i.stack.imgur.com/VWxTz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VWxTz.png" alt="enter image description here"></a></p>
  
  <p>For now, I used slice pipe to get the first line (one button, three items) but I have a problem to do the other lines.</p>
  
  <p>I would like to start a new row when I have 4 column. How can I achieve this ? </p>
  
  <p>Here the code : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div fxFlexFill&gt;
                          &lt;div fxFlexFill fxLayout="row" fxLayoutWrap fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px grid"&gt;
                              &lt;div fxFlex="25"&gt;
                                  &lt;div fxFlexFill fxLayoutAlign="center center"&gt;
                                      &lt;mat-card (click)="addAdvert()" class="mat-card-add"&gt;
                                          &lt;div fxLayout="row" fxLayoutAlign="center center" fxFlex="100%"&gt;
                                              &lt;span style="font-size:32px;text-align:center"&gt;+&lt;br /&gt;Ajouter une publicité&lt;/span&gt;
                                          &lt;/div&gt;
                                      &lt;/mat-card&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div fxFlex="25" *ngFor="let product of products | slice:0:3"&gt;
                                  &lt;div style="border:1px solid #ccc" fxFlexFill fxLayoutAlign="center center"&gt;
                                      &lt;mat-card&gt;
                                          &lt;img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu"&gt;
                                          &lt;mat-card-title&gt;{{product.designation}}&lt;/mat-card-title&gt;
                                          &lt;mat-card-content&gt;
                                              &lt;p&gt;
                                                  {{product.description}}
                                              &lt;/p&gt;
                                          &lt;/mat-card-content&gt;
                                          &lt;mat-divider [inset]="true"&gt;&lt;/mat-divider&gt;
                                          &lt;mat-card-actions align="end"&gt;
                                              &lt;button mat-button&gt;LIKE&lt;/button&gt;
                                              &lt;button mat-button&gt;SHARE&lt;/button&gt;
                                          &lt;/mat-card-actions&gt;
          
                                      &lt;/mat-card&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div fxFlexFill fxLayout="row" fxLayoutWrap fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px grid"&gt;
                              &lt;div fxFlex="25" *ngFor="let product of products | slice:3; let i = index"&gt;
                                  &lt;div style="border:1px solid #ccc" fxFlexFill fxLayoutAlign="center center"&gt;
                                      &lt;mat-card&gt;
                                          &lt;img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu"&gt;
                                          &lt;mat-card-title&gt;{{product.designation}}&lt;/mat-card-title&gt;
                                          &lt;mat-card-content&gt;
                                              &lt;p&gt;
                                                  {{product.description}}
                                              &lt;/p&gt;
                                          &lt;/mat-card-content&gt;
                                          &lt;mat-divider [inset]="true"&gt;&lt;/mat-divider&gt;
                                          &lt;mat-card-actions align="end"&gt;
                                              &lt;button mat-button&gt;LIKE&lt;/button&gt;
                                              &lt;button mat-button&gt;SHARE&lt;/button&gt;
                                          &lt;/mat-card-actions&gt;
          
                                      &lt;/mat-card&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you very much !</p>