angular 6 looping through bootstrap column and grid

Question

here is my angular code it fetches data from backend and show that to the user through UI as CArds

<div class="container" >
  <div class="row" >
    <div class="col-sm" *ngFor="let item of post" >

      <mat-card class="example-card" >
        <mat-card-header>
          <div mat-card-avatar class="example-header-image"></div>
          <mat-card-title>{{item.title}}</mat-card-title>
          <mat-card-subtitle>50% off</mat-card-subtitle>
        </mat-card-header>
        <img mat-card-image src=asset/logo_500.png" alt="Photo of a Shiba Inu">
        <mat-card-content>
          <p>
content
            <br>
            click on "+" button

          </p>
        </mat-card-content>
        <mat-card-actions>
          <button mat-button>LIKE</button>
        </mat-card-actions>
      </mat-card>


    </div>
    
  </div>
</div>

but the issue here is ,it fetches all the objects and displaying that data in that single complete column is there any way where we could filter by adding a condition to this part

in such a way that it checks if that column has more than 3 objects then it should fetch those rest objects to the next row or any other possible solution for this to loop objects through columns and rows in angular

Note:https://material.angular.io/components/grid-list/overview(I've tried this )
searched for solution to iterate that row part
tried to implement For login in that div row part

Answer 1

Bootstrap is a 12grid system , we want 3cols in each row, so 12/3 = 4 In Bootstrap 4 : -

<div class="col-4" *ngFor="let item of post" >

In Bootstrap 5, we have one more option -define in row directly : -

<div class="row row-cols-4" >