title: How to display Angular Material cards as columns and not in rows
body: <p>I am working on an Angular application and as part of it I am trying to create a page with cards being populated vertically and not horizontally. Once 5-6 cards are populated in first column we start filling the second column. My code:</p>
  <pre><code>presentations = [1,2,3,4,5,6,7,8]
  
  &lt;div class=&quot;row card-data&quot;&gt;
      &lt;div class=&quot;col-4&quot; *ngFor=&quot;let presentation of presentations&quot;&gt;
          &lt;mat-card&gt;
              card 1
          &lt;/mat-card&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  .card-data {
          width: 100%;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
      }
  </code></pre>
  <p>But this is filling the cards as rows and not columns. What can I try to resolve this?</p>