Positioning elements in the same row and making responsive using ionic grid

#1

i need to position elements in the same row as there in that picture but ened up with placing elements randomly plz help.

This is my code

<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 size="1" offset="1">
                <span class="box">
                <span class="container-2">
                    <span class="icon"><i class="fa fa-search"></i></span>
                <input type="search" id="search" />
                </span>
                </span>
            </ion-col>

            <ion-segment [(ngModel)]="status">

                <ion-col offset="2" size="2">

                    <ion-segment-button color="primary" value="on">
                        <ion-label>Ongoing</ion-label>

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

                <ion-col size="2" offset="4">
                    <ion-segment-button value="up">
                        <ion-label>Upcoming</ion-label>

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

            <ion-col size="1" offset="10">
                <ion-icon id="filter" name="switch"></ion-icon>
            </ion-col>

        </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>
ion-toolbar{
    --background :black;
    z-index: -1;
}
ion-button{
      width: 50px;
  height: 50px;
  }
  #chat{
      height:40px;
      width:40px;
  }
  #logoW{
    height:40px;
    width:40px;
  }
  ion-content{
      
      --background:linear-gradient(to top, rgba(192,192,192,1) 88%,rgba(0,0,0,1) 50%);
	    background-size: cover;
    	background-repeat: no-repeat;
  }
  #slides1{
      
    
      //width:50%;
      //--ion-grid-padding-md:  0px 50px 0px   0px;
      //padding-bottom: 50%;

  }
   body{
    background: #343d46;
  }
   
  .box{
    
    width: 300px;
    height: 50px;
  }
  
  .container-2{
    width: 300px;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
  }
  
  .container-2 input#search{
    width: 30px;
    height: 30px;
    background:transparent;
    border: none;
    font-size: 12pt;
    float: left;
    color: #262626;
    padding-left: 35px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color:black;
   
    -webkit-transition: width .55s ease;
    -moz-transition: width .55s ease;
    -ms-transition: width .55s ease;
    -o-transition: width .55s ease;
    transition: width .55s ease;
  }
  
  .container-2 input#search::-webkit-input-placeholder {
     color: #65737e;
  }
   
  .container-2 input#search:-moz-placeholder { /* Firefox 18- */
     color: #65737e;  
  }
   
  .container-2 input#search::-moz-placeholder {  /* Firefox 19+ */
     color: #65737e;  
  }
   
  .container-2 input#search:-ms-input-placeholder {  
     color: #65737e;  
  }
  
  .container-2 .icon{
    position: absolute;
    height:45%;
    width: 45%;
    top: 40%;
    margin-left: 6px;
    margin-top: 9px;
    
    color:black;
  }
  
  .container-2 input#search:focus, .container-2 input#search:active{
    outline:none;
    width: 260px;
    background:gray;
    color:black;
  }
   
 
   
  .container-2:hover .icon{
    color:black;
  }
 /*search{
     color:black;
     --background :transparent;
     height:50%;
     widht:50%;

 }*/
 
 ion-segment{
 --border-color:transparent;
 --background-activated:transparent;
 --background-checked:transparent;
 --color:black;
 --color-activated:black;
 --color-checked:black;
 --indicator-color-checked :black;;
 --indicator-color-active :black;
height:50%;
width:50%;
padding-top:-20%;





 }

 #filter{
  height:30px;
  width:30px;
  float:right;
  top:50%;
 
 }
 ion-card{
   --background:white;
   --color:black;
   height:150px;
  width: 342px;
  
    
  
 }
 #title{
   margin-top:-10%;

 }
 .close{
   float:right;
 }
 #insta{
   height:35px;
   width:35px;
   color:white;
   float:left;
   margin-top:20%;
   padding-left: 10%;
   

 }


 /*ion-fab{
   position: relative;
 }*/

#optin{
  margin-top:10%;
margin-right:-10%; 
 width:30%;
float:right;
}
#views{
  float:right;
  margin-top: 32%;
}

plz help me i am new to web development