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

Question

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={{item.cover}} class="crop_img">
                        </div>
                        <div class="text_box">
                            <h3>{{item.name}}</h3>
                            <h4>{{item.status}}</h4>
                            <h4 class="d-flex">
                                <ion-icon class="zmdi zmdi-pin ion-text-start"></ion-icon>
                                {{item.dist}} 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={{item.cover}} class="crop_img">
                        </div>
                        <div class="text_box">
                            <h3>{{item.name}}</h3>
                            <h4>{{item.status}}</h4>
                            <h4 class="d-flex">
                                <ion-icon class="zmdi zmdi-pin ion-text-start"></ion-icon>
                                {{item.dist}} 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={{item.cover}} class="crop_img">
                        </div>
                        <div class="text_box">
                            <h3>{{item.name}}</h3>
                            <h4>{{item.status}}</h4>
                            <h4 class="d-flex">
                                <ion-icon class="zmdi zmdi-pin ion-text-start"></ion-icon>
                                {{item.dist}} 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={{item.cover}} class="crop_img">
                        </div>
                        <div class="text_box">
                            <h3>{{item.name}}</h3>
                            <h4>{{item.status}}</h4>
                            <h4 class="d-flex">
                                <ion-icon class="zmdi zmdi-pin ion-text-start"></ion-icon>
                                {{item.dist}} km | City Food Park
                            </h4>
                        </div>
                    </div>
                </ion-item>
</div>

Answer 1

Problem is you are using two ion-item in your code. Use one. Try below 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={{item.cover}} class="crop_img">
                            </div>
                            <div class="text_box">
                                <h3>{{item.name}}</h3>
                                <h4>{{item.status}}</h4>
                                <h4 class="d-flex">
                                    <ion-icon class="zmdi zmdi-pin ion-text-start"></ion-icon>
                                    {{item.dist}} km | City Food Park
                                </h4>
                            </div>
                        </div>
                    </ion-item>
                </div>
            </div>