Ionic responsive and postioning things

#1

I have to make a responsive website using ionic3-angular and I am stuck with positioning things and making them responsive.i have to develop something like this

but i stuck making in this .

this is my code and i didn’t apply any CSS for that thing.


<meta name="viewport" content="width=device-width, initial-scale=1.0">
    
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="primary">
            <ion-button fill="none">
                <ion-icon id="chat" src="assets/custom/chat.svg">
                </ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-buttons slot="start">
            <ion-button fill="none">
                <ion-icon id="logoW" src="assets/custom/logo-W.svg" slot="icon-only"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-title></ion-title>
<ion-grid>
<ion-row>
<ion-col size-sm="7"offset-sm="4" size-md="6" offset-md="3">
    <img style="max-height:auto " src="../assets/img/gami2.png" />

</ion-col>

</ion-row>



</ion-grid>

     

    </ion-toolbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row>
<ion-col>


    <div id="slides1">
        <ion-slides #mySlider (ionSlidesDidLoad)="slidesDidLoad(mySlider)" [options]="sliderConfig" loop="true">
            <ion-slide>
                <img style="max-height:auto " src="../assets/img/1.png" />
            </ion-slide>
            <ion-slide>
                <img style="max-height:auto" src="../assets/img/2.png" />
            </ion-slide>
            <ion-slide>
                <img style="max-height:auto" src="../assets/img/3.png" />
            </ion-slide>
            <ion-slide>
                <img style="max-height:auto" src="../assets/img/4.png" />
            </ion-slide>
        </ion-slides>
    
    
    
    
    </div>






</ion-col>
</ion-row >



</ion-grid>
    


    <!--- <ion-searchbar *ngIf="isShown" showCancelButton="true" (ionCancel)="isShown=false" searchIcon> </ion-searchbar>
       <ion-buttons >
         <button ion-button icon-only  *ngIf="!isShown" (click)="isShown=true">
           <ion-icon id="search"name="search">

           </ion-icon>

         </button>
       </ion-buttons>   -->
    <ion-grid>
        <ion-row>

            <ion-col col-3>
                <div class="box">
                    <div class="container-2">
                        <span class="icon"><i class="fa fa-search"></i></span>
                        <input type="search" id="search" />
                    </div>
                </div>
            </ion-col>
            <ion-segment [(ngModel)]="status">
                <ion-col col-3>
                    <ion-segment-button color="primary" value="on">
                        <ion-label>Ongoing</ion-label>

                    </ion-segment-button>
                </ion-col>
                <ion-col col-3>
                    <ion-segment-button value="up">
                        <ion-label>Upcoming</ion-label>

                    </ion-segment-button>
                </ion-col>
            </ion-segment>

            <ion-icon id="filter" name="switch"></ion-icon>

        </ion-row>
    </ion-grid>

    <div [ngSwitch]="status" >

        <ion-grid *ngSwitchCase="'on'">
            <ion-row>
                <ion-col>

                    <ion-card *ngFor="let user of users">

                        <ion-icon name="close" class="close"></ion-icon>

                        <ion-icon src="assets/upcoimg/mark.svg"></ion-icon>
                        <ion-card-content>
                            <ion-card-title id="title"text-center >{{user}}</ion-card-title>
                            <ion-button color="danger" id="optin" >Opt-in</ion-button>
                            <ion-icon name="eye" id="views"></ion-icon>
                        </ion-card-content>
<ion-card-footer>  <ion-icon src="assets/upcoimg/insta.svg" id="insta" ></ion-icon></ion-card-footer>
                    </ion-card>
                </ion-col>
            </ion-row>
        </ion-grid>

        

    </div>

</ion-content>



<ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button color="dark">
        <ion-icon name="add"></ion-icon>
    </ion-fab-button>

    <ion-fab-list side="start">

        <ion-fab-button color="dark">
            <ion-icon name="logo-twitter"></ion-icon>
        </ion-fab-button>
        <ion-fab-button color="dark">
            <ion-icon name="logo-facebook"></ion-icon>
        </ion-fab-button>
        <ion-fab-button color="dark">
            <ion-icon name="logo-instagram">Youtube</ion-icon>
        </ion-fab-button>
    </ion-fab-list>

</ion-fab>


















```this is my code and i didnt apply any css for that thing.