How do I divide my ionic template in half? - css

Question

I'm using atm an ion-grid, with ion-cols, works fine for columns, but the problem is a have a table that I would like to fill 50% of the view. Tried setting it like this but doesn't work.
ion-grid{
height: 100%;
}
ion-row.grid1{
height: 50%;
}
This is the my ionic page.html where I want to divide by 2 sections.
<ion-grid>
<ion-row><ion-col col-12><h3>Tijuca</h3></ion-col></ion-row>
<ion-row>
<ion-col col-4> <ion-item>
<ion-label fixed>Sexo:</ion-label>
<ion-input type="text" value=""></ion-input>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item>
<ion-label fixed>Data:</ion-label>
<ion-input type="datetime-local"></ion-input>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item>
<ion-label fixed>Convenio:</ion-label>
<ion-input type="date" value=""></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12>
<ion-item>
<ion-label>Médico solicitante:</ion-label>
<ion-input type="text" value=""></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-6>
<ion-item>
<ion-label>Tel. do Médico:</ion-label>
<ion-input type="text" value=""></ion-input>
</ion-item>
</ion-col>
<ion-col col-6>
<ion-item>
<ion-label>Especialidade médica:</ion-label>
<ion-input type="text" value=""></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12>
<ion-item>
<ion-label>HDA:</ion-label>
<ion-input type="text" value=""></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row class="grid1">
<table>
<tbody>
<tr>
<!-- 16x3 table code inside here -->
</tr>
</tbody>
</table>
</ion-row>
</ion-grid>
Any ideas on what I should be looking for?