Ионная Сетка с ngFor

Question

, поэтому у меня есть эта сеточная структура, и я хочу повторить эту структуру 1,2,3 далее в цикле введите описание изображения здесь

У меня есть следующий код

<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>

Проблема в том, что во втором ряду я не могу печатать 2 разные темы в одном ряду.Любые предложения о том, как я могу напечатать 2 круга / темы в одной строке?