如何包装固定尺寸的离子卡？答案

【问题标题】：How to wrap ionic-card with fixed size?如何包装固定尺寸的离子卡？
【发布时间】：2021-05-22 07:45:55
【问题描述】：

我有一堆ionic-card（我猜元素的种类不相关）要显示。

我最初尝试在ion-grid 中显示它们：

<ion-content>
  <ion-grid>
    <ion-row>
        <ion-col  *ngFor="let trip of trips$ | async" size-lg="3" size="6" size-sm="12"> 
            <ion-card class="trip" class="ion-no-padding" [routerLink]="[trip.id]">
              <img [src]="trip?.coverImageUrl ? trip.coverImageUrl: '/assets/img/defaultImage.jpg'" style="width: 100%" />
              <ion-card-header>
                <ion-card-title>{{trip.name}}</ion-card-title>
                <ion-card-subtitle>{{trip.startDate.toDate() | date}}</ion-card-subtitle>
              </ion-card-header>
            </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

但是当我调整图像大小时，每张卡片的大小都会变化，直到我遇到断点。就我而言，我希望元素的宽度正好为 150 像素，并尽可能多地放在一行上。

例如，如果有人配备了超宽显示器，我不希望只有 12 个被拉伸的宽度元素。

如何做到这一点？

【问题讨论】：

标签： html angular ionic-framework sass material-design

【解决方案1】：

我希望元素的宽度正好为 150 像素，并尽可能多地放在一行上。例如，如果有人配备了超宽显示器，我不希望只有 12 个宽度被拉伸

与 Ionic 不完全相关，但您可以使用 CSS Grid layout 来实现这一点。

请看一下这个working Stackblitz demo。

<ion-header>
    <ion-toolbar>
        <ion-title>Home</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
    <div class="grid">
        <div *ngFor="let item of items" class="grid-item">
            {{ item }}
        </div>
    </div>
</ion-content>

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.grid-item {
  width: 150px;
  height: 150px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  align-self: center;
}

这可以通过多种不同的方式完成，但如果您想了解更多关于 CSS 网格布局的信息，我建议您查看指南部分：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout#guides

【讨论】：

我喜欢这种方法。我会调查一下，谢谢！