I need 3 horizontal rows in my page: the first row containing 3 columns, 2nd containing 2 and the 3rd containing 1; however I am unable to set the height of the rows. It all should be of same size and occupy the whole content area. The below code will make the rows occupy only a small portion of the content area. If I specify the height of the row class in % it is not changing; however in pixels it is working, but I don't want my code to be this rigid. Thanks in advance for any help!
<ion-content>
<div style = "height : 37%; width : 83px; width : 100%; padding : none; border-bottom: 1px solid #D8DFEC; margin : none; background-size: 100% 100%; background-position: center; background-image: url('images/MyHome.PNG'); border-top: 1px solid #D8DFEC; border-bottom: 1px solid #D8DFEC"></div>
<ion-grid>
<ion-row text-center>
<ion-col col-4>A</ion-col>
<ion-col col-4>B</ion-col>
<ion-col col-4>C</ion-col>
</ion-row>
<ion-row text-center>
<ion-col col-4>D</ion-col>
<ion-col col-4>E</ion-col>
</ion-row>
<ion-row text-center>
<ion-col col-4>F</ion-col>
</ion-row>
</ion-grid>
</ion-content>