旧设备的复杂网格布局

Question

我正在尝试实现以下布局：

使用以下html：

.large {
  display: inline-grid;
  grid-template-columns: repeat(4, 60px);
  grid-template-rows: repeat(4, 60px);
  grid-gap: .25em;
  margin: 1em;
}

.large div {
  background: lightgrey;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete {
  grid-column: 4;
  grid-row: 1 / span 2
}

.ok {
  grid-column: 4;
  grid-row: 3 / span 2
}

.zero {
  grid-column: 1 / span 2
}

<div class="large">
  <div (click)="tap('<')" class="delete">X<i class="theme-delete-i"></i></div>
  <div (click)="tap('1')" class="one">1</div>
  <div (click)="tap('2')" class="two">2</div>
  <div (click)="tap('3')" class="three">3</div>
  <div (click)="tap('4')" class="four">4</div>
  <div (click)="tap('5')" class="five">5</div>
  <div (click)="tap('6')" class="six">6</div>
  <div (click)="tap('7')" class="seven">7</div>
  <div (click)="tap('8')" class="eight">8</div>
  <div (click)="tap('9')" class="nine">9</div>
  <div (click)="tap('0')" class="zero">0</div>
  <div (click)="tap('.')" class="separator">.</div>
  <div (click)="ok()" class="ok "><span>OK</span></div>
</div>

，效果很好！但是问题是我必须支持旧的浏览器以及像iphone 5和6这样的旧设备，其中还不支持显示：网格状。我正在寻求通过display：table或display：table-cell或其他与旧android / ios设备兼容的布局来实现此布局的帮助。