Expand ion-row to fill remaining height of grid?

Is there any Ionic CSS utility to stretch a row in a grid so that it fills the remaining empty space(height)? Let’s say I have a grid with a fixed height. In the grid there’s 3 rows. The first two take the height of the items in their columns. The third row should expand in order to fill the remaining height of the grid.
Maybe the pic below makes it clearer:
iongrid

The row is already stretched out the extra space you see is from padding / margin use "ion-no-padding" or "ion-no-margin" to remove the remaining space

Here is the link to the documentation Link

I don’t see the row being stretched. Here is the code:

<ion-content>
    <ion-grid>
        <ion-row>
            <ion-col><div class="some-content">height 100px</div></ion-col>
            <ion-col><div class="some-content">height 100px</div></ion-col>       
        </ion-row>     
        <ion-row>
            <ion-col><div class="some-content">height 100px</div></ion-col>
            <ion-col><div class="some-content">height 100px</div></ion-col>       
        </ion-row> 
        <ion-row class="last-row">
            <ion-col><div class="other-content">height should fill remaining grid height</div></ion-col>
        </ion-row>
    </ion-grid>
</ion-content>


ion-grid{
  border:2px solid green;
  height:400px;
 
}
.some-content{
  border:2px solid red;
  height:100px;
 
}
.other-content{ 
  border: 2px solid blueviolet;
  height: 100%; // fill row ?
  // ?
}
.last-row{
  // ?
}

The code provides the following grid:

What I want to achieve:

Here I hardcoded the height of .last-row to 42%. I’m basically looking for the CSS tags/utilities to determine this value automatically.

Well in that case I think it will be better if we write custom CSS for the grid… that way you will have full control over it…

1 Like