离子网格布局对齐不正确

Posted 2021-03-26

我正在尝试将一个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列高？

答案

然后，我使用.zero将.equals和grid-[row|column]-[start|end]“放置”在它们的特定位置，就差不多了：

#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; }