2 ion-items in single row and 3rd one to the right

I generate dynamic items using ngFor, I want two items to be displayed in a row. But i get only one. If i use two ion-items in div, it is doubled.. I need 1st item on top, 2nd item on bottom of 1st and 3rd item to the right of 1st and 4th to the bottom of 3rd.

My code

<div class="scroll_container">              <div class="list_inner" *ngFor="let item of featuredRest;let i =index;" (click)="openMenu(item)">                  <ion-item (click)="items()">                      <div class="item_inner d-flex">                          <div class="img_box center_img">                              <img src= class="crop_img">                          </div>                          <div class="text_box">                              <h3></h3>                              <h4></h4>                              <h4 class="d-flex">                                  <ion-icon class="zmdi zmdi-pin ion-text-start"></ion-icon>                                   km | City Food Park                              </h4>                          </div>                      </div>                  </ion-item>                  <ion-item (click)="items()">                      <div class="item_inner d-flex">                          <div class="img_box center_img">                              <img src= class="crop_img">                          </div>                          <div class="text_box">                              <h3></h3>                              <h4></h4>                              <h4 class="d-flex">                                  <ion-icon class="zmdi zmdi-pin ion-text-start"></ion-icon>                                   km | City Food Park                              </h4>                          </div>                      </div>                  </ion-item>              </div>          </div>  

The styling

.scroll_container {          width: 100%;          white-space: nowrap;          overflow-x: auto;            .list_inner {              display: inline-block;              margin: 0 12px;                &:first-child {                  margin-left: 20px;              }                &:last-child {                  margin-right: 20px;              }          }      }        ion-item {          --inner-padding-end: 0px;          --inner-min-height: unset !important;          --padding-start: 0;          --background: var(--transparent) !important;          background: var(--white);          margin-bottom: 20px;            .item_inner {              align-items: flex-start !important;                .img_box {                  min-width: 68px;                  height: 68px;                  margin-right: 12px;                  border-radius: 3px;              }                .text_box {                  width: 100%;                    h3 {                      margin: 0;                      font-size: 1rem;                      color: var(--text-black);                      padding-bottom: 6px;                      padding-top: 3px;                  }                    h4 {                      margin: 0;                      color: var(--text-light);                      font-size: 0.7rem;                      font-weight: 400;                      margin-bottom: 9px;                      letter-spacing: 0.3px;                      align-items: flex-start;                        ion-icon {                          min-width: 16px;                          padding: 0 2px;                          font-size: .8rem;                      }                  }                    h5 {                      margin: 0;                      color: var(--primary);                      font-size: .73rem;                      font-weight: 400;                      margin-bottom: 7px;                      letter-spacing: .3px;                        ion-icon {                          min-width: 16px;                          padding: 0 2px;                          font-size: .8rem;                      }                  }              }          }      }  

I tried putting ngif(i%2)==0 for second ion-item and vice versa for first ion-item. Even i get all the items in single row.

Code with ngIf

<div class="list_inner" *ngFor="let item of featuredRest;let i =index;"> (click)="openMenu(item)">  <ion-item (click)="items()" *ngIf="i%2 != 0">                      <div class="item_inner d-flex">                          <div class="img_box center_img">                              <img src= class="crop_img">                          </div>                          <div class="text_box">                              <h3></h3>                              <h4></h4>                              <h4 class="d-flex">                                  <ion-icon class="zmdi zmdi-pin ion-text-start"></ion-icon>                                   km | City Food Park                              </h4>                          </div>                      </div>                  </ion-item>                  <ion-item (click)="items()" *ngIf="i%2==0">                      <div class="item_inner d-flex">                          <div class="img_box center_img">                              <img src= class="crop_img">                          </div>                          <div class="text_box">                              <h3></h3>                              <h4></h4>                              <h4 class="d-flex">                                  <ion-icon class="zmdi zmdi-pin ion-text-start"></ion-icon>                                   km | City Food Park                              </h4>                          </div>                      </div>                  </ion-item>  </div>  

https://stackoverflow.com/questions/65357238/2-ion-items-in-single-row-and-3rd-one-to-the-right December 18, 2020 at 08:39PM