Ion-grid fit width to content

Hi everyone,

Ive been struggling with this lately, and thus Ive finally decided to post it here asking for help.

The figure below shows what im getting now. I have an ion-card (in red), and inside, an ion-grid (blue) which has 6 ion-rows, the last two containing 3 ion-cols (in green).
No width was specified to any of the attributes (except for the ion-cols, which have a “col-4” attribute), the last two rows are taking up the whole width of the ion-grid… I would like to achieve 2 things:

  1. for the last two rows to fit their content (that is, all cols having the width of the cell with the longest content); and then,
  2. to get that grid, which will now have a width shorter than the width of the ion-card, and center it horizontally on the card.

Can anyone guide me? Thanks!

Here is the html code:

<ion-card class="card card-md">

      <ion-card-content class="card-content card-content-md">
        <ion-grid class="grid">

            <ion-row class="row" id="distance">orci ut</ion-row>

            <ion-row class="row">lorem ipsum dolor</ion-row>

            <ion-row class="row">consectetur adipiscing </ion-row>

            <ion-row class="row">tristique</ion-row>

            <ion-row class="row">
          <ion-col class="col" col-4="">netus</ion-col>
          <ion-col class="col" col-4="">dui sollicitudin lacinia </ion-col>
          <ion-col class="col" col-4="">accumsan</ion-col>
        </ion-row>
        <ion-row class="row">
          <ion-col class="col" col-4="">Phasellus porta</ion-col>
          <ion-col class="col" col-4="">bibendum</ion-col>
          <ion-col class="col" col-4="">tempor eget</ion-col>
        </ion-row>

        </ion-grid>
      </ion-card-content>
    </ion-card>
1 Like

https://ionicframework.com/docs/api/components/grid/Grid/
A voir par ici