Creating a repetitive Ionic table

Question

Let’s get down to the problem:

I need to create a table by Ionic that, as in the Instagram album, is divided into 3 images per line, this code was made by angular. Here’s my HTML code in Ionic:

<ion-content> 
    <h1>Fotos</h1>
  <ion-list> 
    <ion-grid> 

      <ion-item *ngFor="let photo of photos">
          <ion-list id="album">
            <div class="foto"><img src="{{photo.url}}"></div>
          </ion-list>
      </ion-item>
  </ion-grid>

 </ion-list>
</ion-content>

Part . TS

interface IPhoto {
  albumId: number;
  id: number;
  title: string;
  url: boolean;
  thumbnilUrl: string;
}

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {

  api: string;
  photos: IPhoto[];

  constructor(
  public httpClient: HttpClient
  ) {
    this.api = 'https://jsonplaceholder.typicode.com';

    // Obtenção das fotos da API
    httpClient.get(this.api + '/photos')
      .subscribe((res: IPhoto[]) => {
        console.log(res);
        this.photos = res;
      });
  }}

My teacher has a habit of teaching languages that even he doesn’t know, and since it’s the final job, he won’t help me.

What I need is a way to turn these posts into a table. By PHP, Javascript or C# I would know how to do it, but I don’t know how I could do it if inside Typescript to finish a line and create another.

I thought of creating a div in CSS, which would create a specific size table that would limit the photos, but I’m not sure that would work. Someone could help me?