title: Angular button screen
body: <p>I have a <code>div</code> which contains a bunch of buttons. I currently look like the image, but I can't get them to be next to each other as well. It looks like a one whole column. I want to have 20 little buttons per row (I currently have 1000 buttons). How can I make them evenly spaced row wise and column wise in Angular?</p>
  <p>HTML:</p>
  <pre><code>&lt;div fxLayout=&quot;column wrap&quot; fxLayoutGap=&quot;30px&quot;  fxLayoutAlign=&quot;start center&quot; class=&quot;mat-elevation-z2 responsive-grid&quot;&gt;
                          &lt;button mat-button class=&quot;green fuse-white-fg&quot;
                              *ngFor=&quot;let prm of cell&quot;&gt;{{prm.LocationReference}}&lt;/button&gt;
                      &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/3Kbk6.png" rel="nofollow noreferrer">enter image description here</a></p>