离子网格布局对齐不正确

Question

我正在尝试将一个 Grid 列扩展为 2 列宽度.. 但没有正确扩展.. 见下文 Currently Showing Layout

这是我的 HTML...

<ion-content>
  <div class="ion-padding">
    <ion-grid>
    <ion-row align-items-center>
        <ion-col size="12"><input type="text" class="calculation_view" readonly value="0"></ion-col>
    </ion-row>
      <ion-row class="calculator_digits" align-items-center>
        <ion-col>C</ion-col>
        <ion-col>DEL</ion-col>
        <ion-col>/</ion-col>
        <ion-col>*</ion-col>
      </ion-row>
      <ion-row class="calculator_digits" align-items-center>
        <ion-col>7</ion-col>
        <ion-col>8</ion-col>
        <ion-col>9</ion-col>
        <ion-col>-</ion-col>
      </ion-row>
      <ion-row class="calculator_digits" align-items-center>
        <ion-col>4</ion-col>
        <ion-col>5</ion-col>
        <ion-col>6</ion-col>
        <ion-col>+</ion-col>
      </ion-row>
      <ion-row class="calculator_digits" align-items-center>
        <ion-col>1</ion-col>
        <ion-col>2</ion-col>
        <ion-col>3</ion-col>
        <ion-col>=</ion-col>
      </ion-row>
      <ion-row class="calculator_digits" align-items-center>
        <ion-col size="6">0</ion-col>
        <ion-col size="3">.</ion-col>
      </ion-row>
  </ion-grid>
  </div>
</ion-content>

CSS...

ion-row.calculator_digits{

    ion-col{
        font-size: 20px;
        margin: 4px;
        background: #607d8b;
        border: none;
        text-align: center;
        padding: 8px;
        font-family: monospace;
    }
}

input.calculation_view {
    font-family: monospace;
    font-size: 25px;
    background: #607d8b;
    border: none;
    padding: 5px 8px;
    text-align: right;
    width: 100%;
}

另请参阅我正在关注的此演示图像... Original Design

如何将等号 (=) 列设置为 2 列高？

Answer 1

我不确定你是否可以在 ionic 的网格中做到这一点，因为他们使用 flex 来构建他们的网格系统。 Flex，unline Grid，不能是多方向的（即垂直和水平）。为了实现这一点，我会使用网格。

为了使用网格，我先将父级的显示设置为grid。之后，我为每一列设置大小（在下面的示例中，我为每一列设置了60px）。

然后，我使用grid-[row|column]-[start|end] 将.zero 和.equals“放入”它们的特定位置，就是这样：

#calculator {
  --size: 60px;
  display: grid;
  grid-template-columns: var(--size) var(--size) var(--size) var(--size);
  grid-gap: 8px;
}

button {
  font-family: monospace;
  font-size: 25px;
  background: #607d8b;
  border: none;
  line-height: 60px;
  text-align: center;
  width: 100%;
}

button.zero {
  grid-row-start: 5;
  grid-column-start: 1;
  grid-column-end: span 2;
}

button.equals {
  grid-row-start: 4;
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-end: span 2;
}

<div id="calculator">
  <button>C</button>
  <button>&lt;</button>
  <button>/</button>
  <button>X</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
  <button>-</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>+</button>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button class="zero">0</button>
  <button>.</button>
  <button class="equals">=</button>
</div>