Ionic: подгонка ионной сетки к содержимому

Question

В последнее время я боролся с этим, и поэтому я наконец решил опубликовать это здесь с просьбой о помощи.

На рисунке ниже показано, что я получаю сейчас. У меня есть ионная карта (красная), а внутри - ионная сетка (синяя), которая имеет 6 ионных рядов, последние две содержат 3 ионных столбца (зеленым).

Ширина не указана ни для одного из атрибутов (за исключением ion-cols, который имеет атрибут col-4), последние две строки занимают всю ширину ионной сетки ... Я хотел бы добиться 2 вещей:

Чтобы последние две строки соответствовали своему содержимому (то есть всем столбцам, имеющим ширину ячейки с самым длинным содержимым); а потом, чтобы получить эту сетку, которая теперь будет на одну ширину короче ширины ионной карты, и центрировать ее горизонтально на карте. Кто-нибудь может направить меня? Спасибо!

Скриншот

Вот полученный 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>

Answer 1

Надеюсь, я правильно понял: прежде всего, если ваши столбцы должны соответствовать своему содержанию, просто опустите col-4. См. документы по этому вопросу:

По умолчанию столбцы будут занимать одинаковую ширину внутри строки для всех устройств и размеров экрана.

Для центрирования столбцов по горизонтали вы можете использовать свойство text-align CSS. См. Описание на developer.mozilla.org :

Свойство text-align CSS определяет горизонтальное выравнивание встроенного блока или поля ячейки таблицы. Это означает, что оно работает как вертикальное выравнивание, но в горизонтальном направлении.

Результат может выглядеть примерно так (я использую встроенные стили, вы можете добавить эти стили в свой CSS, если он работает для вас):

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