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

Question

我有一堆 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>

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

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

如何实现？

Answer 1

I would like to have the elements being exactly 150px width and fits as much as possible on one line. By example, if somebody comes with an ultra-wide monitor, I don't want to have only 12 elements in the width that are stretched

与 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

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

How to wrap ionic-card with fixed size?

html

sass

ionic-framework

material-design

angular