How to change the min-height of ion-col?

Ionic Framework ionic-v3
1

Hi, I’m using ion-grid to show a list of items. In each row, the left cell is photo of this item and the cell on the right contains the description.

If the description is long, the height of the row will be adjusted automatically. However, if the description is short, then there will be a blank at the bottom of the photo.

image
area 1 is the photo, which is fixed size with 100px width and height, 8px margin. area 2 is the description text. If only short sentence in area 2, then the total height of the col-row is 120px, which is greater than the minimum height.

I would like to know is there any solution to change the min-height to make it looks better? Thanks in advance.

2

Try this:

<ion-list>
  <ion-item text-wrap>
    <ion-thumbnail item-start>
      <img src="img/your-image.png">
    </ion-thumbnail>
    <h2>Description header</h2>
    <p>description of the item</p>
    <button ion-button clear item-end>View</button>
  </ion-item>
</ion-list>
3

I tried this way previously, it works as expected when the description is short, but it comes to another issue for longer description.

I’d like to put the photo in the upper part of the ion-item instead of middle position (vertical align: middle) when the description is longer. I tried to overwrite the css attribute but cannot find the correct way to do that.