Css 使用角度指令垂直对齐离子卡

我正在尝试使用Ionic框架进行一个简单的卡片收集

我正在使用SpaceX API填充这些卡。我的代码包括角度指令。我建造了这个：

<ion-grid>
  <ion-row>
    <ion-col col-4>
      <ion-card *ngFor="let launch of list_launches">
        <ion-card-header>
          {{ launch.mission_name }}
        </ion-card-header>
        <ion-card-content>
          <ion-thumbnail item-start>
            <img src="{{launch.links.mission_patch_small}}">
          </ion-thumbnail>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

---

但是，当我使用*ngfor参数时，这并不正确。希望垂直对齐此离子卡。

因此，这里的问题是，离子网格需要一个非通用模板来构建更复杂的网格。我总是发现这些布局组件太过复杂，因为大多数东西都可以用几个CSS声明来完成。在你的情况下，我根本不会使用离子网格并将其写入。两个简单的CSS规则可以处理此问题：

display: grid;
grid-template-columns: 1fr 1fr 1fr;

我在这里创建了一个非常基本的网格，并告诉它有三个大小相等的列（

1fr

表示1个分数）

您也可以使用

repeat

功能

display: grid;
grid-template-columns: repeat(3, 1fr);

更不用说代码了：

<div style="display: grid;grid-template-columns: 1fr 1fr 1fr;">
  <ion-card  *ngFor="let launch of list_launches">
    <ion-card-header>
      {{ launch.mission_name }}
    </ion-card-header>
    <ion-card-content>
      <ion-thumbnail item-start>
        <img src="">
      </ion-thumbnail>
    </ion-card-content>
  </ion-card>
</div>

---

现在你把所有的牌放在同一列。只需将

*ngFor

放在

ion col

上，而不是

ion卡

，它就可以正常工作了。

<div style="display: grid;grid-template-columns: 1fr 1fr 1fr;">
  <ion-card  *ngFor="let launch of list_launches">
    <ion-card-header>
      {{ launch.mission_name }}
    </ion-card-header>
    <ion-card-content>
      <ion-thumbnail item-start>
        <img src="">
      </ion-thumbnail>
    </ion-card-content>
  </ion-card>
</div>

<ion-row>
  <ion-col col-4 *ngFor="let launch of list_launches" >
    <ion-card >
      <ion-card-header>
        {{ launch.mission_name }}
      </ion-card-header>
      <ion-card-content>
        <ion-thumbnail item-start>
          <img src="">
        </ion-thumbnail>
      </ion-card-content>
    </ion-card>
  </ion-col>
</ion-row>