How to create a repeater that makes a new row every 3 items?

Question

In my .ts file, I have an array of company details.

 

In my HTML, I'm then using ngFor to display these companies using the following code:

 

<div class="card-deck">

<div class="card" *ngFor="let company of companies">

<img src="..." class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">{{ company.companyName }}</h5>

<p class="card-text">Industry: {{ company.industry }} Share Price: {{ company.sharePrice }} Rating: {{ company.starRating }}</p>

<a href="#" class="btn btn-primary">Go somewhere</a>

<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>

</div>

</div>

</div>

This displays the companies on my page, but they are all in one row.

 

For example, if I have 3 companies, they are all in the same row. If I have 10 companies, they all stay on the same row.

 

What changes do I need to make so that there is only max 3 companies on one row of cards?