Ionic Pattern with Grid and ngFor

Issue

so i have this grid structure and i want to repeat this 1,2,3 structure further down the loop enter image description here

I have the following code

<ion-grid *ngFor="let topics of topics;let i = index">
          <ion-row *ngIf="i%3 == 0">
            <ion-col>
                <div class="square-container">
                <div class="square2" >
                    <div class="content" >
                        <ion-icon *ngIf="topics.topics_hide.locked=='true'"name="lock"></ion-icon>
                        <ion-icon *ngIf="topics.topics_hide.locked=='false'"name="ios-unlock-outline"></ion-icon>
                      <hr>


                    </div>

                  </div>
                  <p class="pc">{{topics.topics_title}}</p>
                </div>
            </ion-col>

          </ion-row >
          <ion-row *ngIf="i % 3 == 1">
            <ion-col col-6 col-sm  *ngIf="i % 3 == 1">
                <div class="square-container">
                    <div class="square1" >
                        <div class="content" >
                            <ion-icon *ngIf="topics.topics_hide.locked=='true'"name="lock"></ion-icon>
                            <ion-icon *ngIf="topics.topics_hide.locked=='false'"name="ios-unlock-outline"></ion-icon>
                          <hr>

                        </div>

                      </div>
                      <p class="pc2">{{topics.topics_title}}</p>
                    </div>
            </ion-col >
            <ion-col col-6 col-sm>
                <div class="square-container">
                    <div class="square1" >
                        <div class="content" >
                            <ion-icon *ngIf="topics.topics_hide.locked=='true'"name="lock"></ion-icon>
                            <ion-icon *ngIf="topics.topics_hide.locked=='false'"name="ios-unlock-outline"></ion-icon>
                          <hr>

                        </div>

                      </div>
                      <p class="pc2">{{topics.topics_title}}</p>
                    </div>
            </ion-col>
          </ion-row>
      </ion-grid>

The problem is the second row i cant seem to print 2 different topics in the same row. Any suggestions on how i can print 2 circles/topics in the same row?

Solution

Managed to solve my problem using mod

<div *ngFor="let topics of topics;let i = index">


    <div *ngIf="i%3 == 0 && i==0"class="story_scroll_center">
      <div class="story_img_bg" [ngStyle]="{'background-color': topics.topics_hide.locked=='false'? '#344955' : '#979797'}" (click)="opensubtopic(topics,i)">
          <ion-icon color="light" no-margin no-padding text-center class="story_img" *ngIf="topics.topics_hide.locked=='true'"name="lock"></ion-icon>
          <ion-icon color="light" no-margin no-padding text-center class="story_img "*ngIf="topics.topics_hide.locked=='false'"name="ios-unlock-outline"></ion-icon>
          <hr>
      <img no-margin no-padding text-center class="story_img" src={{topics.topics_icon}}>
    </div>
      <p   class="story_text">{{topics.topics_title}}</p>
    </div>  

    <!-- <div *ngIf="i%3 == 0 && i > 0" class="square-container">
      <br>
        <div class="square" >
          <div class="content" [ngStyle]="{'background-color': topics.topics_hide.locked=='false'? '#344955' : '#979797'}" (click)="opensubtopic(topics,i)">
            <ion-icon *ngIf="topics.topics_hide.locked=='true'"name="lock"></ion-icon>
            <ion-icon *ngIf="topics.topics_hide.locked=='false'"name="ios-unlock-outline"></ion-icon>
            <hr>
            <img src={{topics.topics_icon}}>
          </div>
        
        </div>
        <p class="story_text">{{topics.topics_title}}</p>
      </div> -->

      <div *ngIf="i%3 == 0 && i > 0"class="story_scroll_center_sec">
        <div class="story_img_bg" [ngStyle]="{'background-color': topics.topics_hide.locked=='false'? '#344955' : '#979797'}" (click)="opensubtopic(topics,i)">
            <ion-icon color="light" no-margin no-padding text-center class="story_img" *ngIf="topics.topics_hide.locked=='true'"name="lock"></ion-icon>
            <ion-icon color="light" no-margin no-padding text-center class="story_img "*ngIf="topics.topics_hide.locked=='false'"name="ios-unlock-outline"></ion-icon>
            <hr>
        <img no-margin no-padding text-center class="story_img" src={{topics.topics_icon}}>
      </div>
        <p   class="story_text">{{topics.topics_title}}</p>
      </div>  

      <div *ngIf="i % 3 == 1"class="story_scroll">
        <div class="story_img_bg" [ngStyle]="{'background-color': topics.topics_hide.locked=='false'? '#344955' : '#979797'}" (click)="opensubtopic(topics,i)">
            <ion-icon  color="light"no-margin no-padding text-center class="story_img" *ngIf="topics.topics_hide.locked=='true'"name="lock"></ion-icon>
            <ion-icon  color="light" no-margin no-padding text-center class="story_img "*ngIf="topics.topics_hide.locked=='false'"name="ios-unlock-outline"></ion-icon>
            <hr>
        <img no-margin no-padding text-center class="story_img" src={{topics.topics_icon}}>
      </div>
        <p   class="story_text">{{topics.topics_title}}</p>
      </div>

      <div *ngIf="i % 3 == 2"class="story_scroll_right">
        <div class="story_img_bg" [ngStyle]="{'background-color': topics.topics_hide.locked=='false'? '#344955' : '#979797'}" (click)="opensubtopic(topics,i)">
            <ion-icon color="light" no-margin no-padding text-center class="story_img" *ngIf="topics.topics_hide.locked=='true'"name="lock"></ion-icon>
            <ion-icon color="light" no-margin no-padding text-center class="story_img "*ngIf="topics.topics_hide.locked=='false'"name="ios-unlock-outline"></ion-icon>
            <hr>
        <img no-margin no-padding text-center class="story_img" src={{topics.topics_icon}}>
      </div>
        <p   class="story_text">{{topics.topics_title}}</p>
      </div>          

Answered By - DarrenChand