Css 离子：将离子网格与内容相匹配

我最近一直在努力解决这个问题，因此我最终决定把它贴在这里寻求帮助

下图显示了我现在得到的结果。我有一个离子卡（红色），里面有一个离子网格（蓝色），它有6个离子行，最后两个包含3个离子列（绿色）

没有为任何属性指定宽度（ion cols除外，它有一个

col-4

属性），最后两行占据了离子网格的整个宽度。。。我想实现两件事：

用于最后两行以适合其内容（即，具有最长内容单元格宽度的所有列）；然后， 要获得网格，它现在将比离子卡的宽度短一个宽度，并将其水平居中放置在离子卡上。 有人能指引我吗？谢谢

屏幕截图

以下是生成的html代码：

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

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

        <ion-row class="row">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>

奥奇乌特
同侧阴唇
献祭
特里斯蒂克
内特斯
拉齐尼亚苏利西提酒后驾车
accumsan
门相位
比本杜姆
临时性

我希望我的回答是正确的：首先，如果你的专栏应该适合他们的内容，就省略

col-4

。请参见以下内容：

默认情况下，对于所有设备和屏幕大小，列在一行内的宽度相等

要使列水平居中，可以使用

text align

CSS属性。请参见以下内容的说明：

text-align CSS属性指定内联或表格单元格框的水平对齐方式。这意味着它的工作方式类似于垂直对齐，但在水平方向上

结果可能如下所示（我使用的是内联样式，如果它适合您，您可能希望将这些样式添加到CSS中）：

奥奇乌特
同侧阴唇
献祭
特里斯蒂克
内特斯
拉齐尼亚苏利西提酒后驾车
accumsan
门相位
比本杜姆
临时性

这方面有什么更新吗？我的回答有助于解决你的问题吗？

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

            <ion-row class="row">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" style="text-align: center">
                <ion-col class="col">netus</ion-col>
                <ion-col class="col">dui sollicitudin lacinia </ion-col>
                <ion-col class="col">accumsan</ion-col>
            </ion-row>
            <ion-row class="row" style="text-align: center">
                <ion-col class="col">Phasellus porta</ion-col>
                <ion-col class="col">bibendum</ion-col>
                <ion-col class="col">tempor eget</ion-col>
            </ion-row>

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