How to display 2 cards on each row?

Issue

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?

HTML

  <div id="cards-container">
    <ion-card>
      <ion-img src="../../../../../../assets/sample.jpg"></ion-img>
    </ion-card>
    <ion-card>
      <ion-img src="../../../../../../assets/sample.jpg"></ion-img>
    </ion-card>
    <ion-card>
      <ion-img src="../../../../../../assets/sample.jpg"></ion-img>
    </ion-card>
    <ion-card>
      <ion-img src="../../../../../../assets/sample.jpg"></ion-img>
    </ion-card>
    <ion-card>
      <ion-img src="../../../../../../assets/sample.jpg"></ion-img>
    </ion-card>
  </div>

SCSS

#cards-container {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

  ion-card {
    margin: 5px;
    width: 50%;
  }
}

Solution

Template:

<div id="cards-container">
  <ion-card>
    <ion-img src="https://via.placeholder.com/150"></ion-img>
  </ion-card>
  <ion-card>
    <ion-img src="https://via.placeholder.com/150"></ion-img>
  </ion-card>
  <ion-card>
    <ion-img src="https://via.placeholder.com/150"></ion-img>
  </ion-card>
  <ion-card>
    <ion-img src="https://via.placeholder.com/150"></ion-img>
  </ion-card>
  <ion-card>
    <ion-img src="https://via.placeholder.com/150"></ion-img>
  </ion-card>
</div>

SCSS:

#cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

  ion-card {
    margin: 5px 0;
    width: calc(50% - 15px);
  }
}

Answered By - huan feng