Set ion-row height size in Ionic2

Question

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>

Answer 1

I'm pretty sure that the problem is that setting the height of each row by using a percentage value, is relative to the height of the container (the ion-grid). So you can do that by first setting the height of the grid to be the 100% of the content, and then you can set the height of the rows to be 33%:

ion-grid {
  height: 100%;

  ion-row {
    height: 33.33%;
  }
}

You can take a look at this working plunker

(Note: In the plunker the styles has been placed inline in the html code just to make the demo easier. They should be placed in the page.scss file corresponding to that page)