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:
- 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,
- 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>