如何在离子网格中的一行中制作所有列

Question

在我的 ionic 3 项目中，我想显示一个包含许多行和列的网格。 由于列的数量很大，所以将列分成几个部分并显示在几行中。

如何压缩列的大小并将所有列显示在一行中？

.ts

  patternXY: any = [];
  patRowY = 120;
  patColX = 100;
  ...
  for(let y = 0; y < this.patRowY; y++) {
      let rowY = []
      for(let x = 0; x< this.patColX; x++){
        rowY.push(0)
      }
      this.patternXY.push(rowY);
    }

.html

<ion-grid >
  <ion-row *ngFor="let item of patternXY; index as i" no-padding>
    <ion-col *ngFor="let item of patternXY[i]; index as j" class="bgcolor" size="auto">
    </ion-col>
  </ion-row>
</ion-grid>

.sccs

.bgcolor {
  background: #cdcfd6;
}

ion-col {
  border: 0.1px solid #aeb7ca;
}

在上面的示例中，一行中的列数设置为 100。但是您可以看到第一行中仅绘制了 30 列。 第 2 行还有 30 个，第 3 行有 30 个，第 4 行有 10 个。我希望所有 100 列都显示在一行中。 这需要减少 cloumns 的宽度。 但我找不到解决方案。

Answer 1

正方形的大小来自填充，默认填充为 10 像素，您必须将其设置为较低的值或 0 以减小正方形的宽度。

我在此页面上通过更改 CSS 的填充和 HTML 的列数量来尝试它： https://ionicframework.com/docs/api/grid并在没有中断的情况下显示所有列。

更详细的填充并不完全适用于 cols 本身（可能取决于您的 CSS），而是包含的 div：

      .ion-col > div {
        background-color: #f7f7f7;
        border: solid 1px #ddd;
        padding: 10px;
      }

根据您的 CSS 和 HTML 所需的解决方案可能会略有不同，但我希望您明白这一点。