In my application I am in need to stack dynamic content div's vertically in column count 3. column count 3 breaks the div content when there are only 4 div's. Could some one help me with this. Attached screenshot for reference

<style>
  .cardHolder {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;

    width: 100%;
    height: 100px;
    box-sizing: border-box;
    background-color: #90cdc0;
    margin-bottom: 2em;
  }
  .title {
    font-weight: bold;
  }
  .wrapper {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    margin: auto;
    padding: 0;
  }
  ion-content {
    background-color: #ddd;
  }
</style>

<ion-content padding>
  <div class="wrapper">
    <div class="cardHolder">
      <div class="title">Alpha</div>
      <div class="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>

    <div class="cardHolder">
      <div class="title">bravo 2</div>
      <div class="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>
    <div class="cardHolder">
      <div class="title">charlie 3</div>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
      </div>
    </div>
    <div class="cardHolder">
      <div class="title">Delta 4</div>
      <div class="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna
        </p>
      </div>
    </div>
  </div>
</ion-content>

https://stackblitz.com/edit/ionic-wsubby?file=pages%2Fhome%2Fhome.html