title: How to display 2 cards on each row?
body: <p>I have 5 cards in a container and I'm trying to display two cards on each row. I tried the below code but its giving one card on each row. How to solve this issue?</p>
  <p><strong>HTML</strong></p>
  <pre><code>  &lt;div id=&quot;cards-container&quot;&gt;
      &lt;ion-card&gt;
        &lt;ion-img src=&quot;../../../../../../assets/sample.jpg&quot;&gt;&lt;/ion-img&gt;
      &lt;/ion-card&gt;
      &lt;ion-card&gt;
        &lt;ion-img src=&quot;../../../../../../assets/sample.jpg&quot;&gt;&lt;/ion-img&gt;
      &lt;/ion-card&gt;
      &lt;ion-card&gt;
        &lt;ion-img src=&quot;../../../../../../assets/sample.jpg&quot;&gt;&lt;/ion-img&gt;
      &lt;/ion-card&gt;
      &lt;ion-card&gt;
        &lt;ion-img src=&quot;../../../../../../assets/sample.jpg&quot;&gt;&lt;/ion-img&gt;
      &lt;/ion-card&gt;
      &lt;ion-card&gt;
        &lt;ion-img src=&quot;../../../../../../assets/sample.jpg&quot;&gt;&lt;/ion-img&gt;
      &lt;/ion-card&gt;
    &lt;/div&gt;
  </code></pre>
  <p><strong>SCSS</strong></p>
  <pre><code>#cards-container {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  
    ion-card {
      margin: 5px;
      width: 50%;
    }
  }
  </code></pre>