使用CSS网格制作的此解决方案的替代方案是什么？

Question

我将这些框与css网格对齐，如下所示以及在JSfiddle中。

容器基本上包装了我网站的内容，在这种情况下是网格。它的工作原理与我想要的一样。但是，我只是注意到iOS 10.2不支持该网格。

您能提供一种兼容性更好的替代方法吗？我当然自己尝试过，但是我只能在网格上成功。

html {
  font-size: 62.5%;
}

.container {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: lightblue;
}

.box {
  width: 100%;
  display: grid;
  grid-auto-rows: 35rem;
  grid-template-columns: repeat(auto-fill, minmax(27rem, 1fr));
  grid-gap: 4em;
}

.boxWrapper {
  display: flex;
  justify-content: center;
}

.innerBox {
  height: 35rem;
  width: 27rem;
  padding: 2rem;
  background-color: grey;
  border-radius: 2rem;
  box-sizing: border-box;
  justify-content: center;
}

<div class="container">
  <div class="box">
    <div class="boxWrapper">
      <div class="innerBox">
      </div>
    </div>
    <div class="boxWrapper">
      <div class="innerBox">
      </div>
    </div>
    <div class="boxWrapper">
      <div class="innerBox">
      </div>
    </div>
    <div class="boxWrapper">
      <div class="innerBox">
      </div>
    </div>
    <div class="boxWrapper">
      <div class="innerBox">
      </div>
    </div>
    <div class="boxWrapper">
      <div class="innerBox">
      </div>
    </div>
  </div>
</div>

JSFiddle

Answer 1

You could easily do this whit flexbox. In this JSFiddle I've only set the element box to flex and set its childrens to occupy the half of the entire space less the space I want to leave between each others.