Ionic 中的响应式方形网格答案

【问题标题】：Responsive Square grids in IonicIonic 中的响应式方形网格
【发布时间】：2018-04-20 07:18:18
【问题描述】：

我想在 ionic 中创建响应式方形网格，就像上图所示。

但是，相反，我得到了如下图所示的内容。我在网上搜索了我找不到任何不涉及使用我不想使用的图像的解决方案。

【问题讨论】：

标签： css ionic-framework responsive-design responsive

【解决方案1】：

你可以用纯 CSS 来做：

* {
  box-sizing: border-box;
}

.square-container {
  padding: 8px;
}

.square {
  width: calc(100% / 5);
  float: left;
  position: relative;
  padding-bottom: calc(100% / 5);
}

.square .content {
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    margin: 8px;
    padding: 16px;
    position: absolute;
    color: white;
    background-color: #0095ff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}

<div class="square-container">
  <div class="square">
    <div class="content">1</div>
  </div>

  <div class="square">
    <div class="content">2</div>
  </div>

  <div class="square">
    <div class="content">3</div>
  </div>

  <div class="square">
    <div class="content">4</div>
  </div>

  <div class="square">
    <div class="content">5</div>
  </div>

  <div class="square">
    <div class="content">6</div>
  </div>

  <div class="square">
    <div class="content">7</div>
  </div>

  <div class="square">
    <div class="content">8</div>
  </div>

  <div class="square">
    <div class="content">9</div>
  </div>

  <div class="square">
    <div class="content">10</div>
  </div>
  
  <div class="square">
    <div class="content">11</div>
  </div>
  
  <div class="square">
    <div class="content">12</div>
  </div>
</div>

【讨论】：