How can I make this card with ngFor like in this picture, with automatic adjust column in angular

Issue

here's my code

<div class="row px-5 py-4">
  <div class="col-sm-12 col-md-6 col-lg-4" *ngFor="let row of data; let i = index">
    <div class="card px-4 py-4 mb-3" style="height: 400px">
      <div>
        <app-static-html [widget]="row" *ngIf="isStaticContent(row)"></app-static-html>
      </div>
    </div>
  </div>
</div>

can you help me for this

Appreciate your help

Solution

You can use flex-box and set flex-basis:100% on every 4th card.

#zone { 
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
}

.card {
  flex: 1;
  background: dodgerblue;
  border: 0;
  border-radius: 1rem;
  height: 100px;
}

.card:nth-child(4n) {
  flex-basis: 100%;
}

<div id="zone">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

Answered By - Besworks