离子响应方形网格

Question

我想在离子中创建响应式方格，如上图所示。

但相反，我得到的东西就像在下面的图片中显示的那样。我搜索了网络，我找不到任何不涉及使用我不想使用的图像的解决方案。

Answer 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>