带有响应方块的网格布局

Question

我想创建一个带有响应方块的网格布局。

我觉得我应该能够使用 CSS Grid 布局来做到这一点，但是无法将每个正方形的高度设置为等于宽度。

也无法在每个方格之间设置排水沟。

使用 flexbox 会更好吗？

目前我的 HTML 看起来像这样，但将是动态的，因此可以添加更多的正方形。当然，它需要具有响应性，因此理想情况下会使用媒体查询将其折叠为一列。

 <div class="square-container">

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

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

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

</div>

使用css网格，这是我得到的

.square-container{
    display: grid;
    grid-template-columns: 30% 30% 30%;
    .square {

    }
}

我能够使用 flexbox 走得更远，并且能够使用 space-between 将正方形与漂亮的排水沟对齐，但仍在努力使高度与每个正方形的宽度相匹配。

我无法找到任何使用 flexbox 或网格完成的示例，但任何示例也将不胜感激。

谢谢

原文由 Stretch0 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

padding-bottom 技巧是最常用的方法。

您可以将它与 Flexbox 和 CSS Grid 结合使用，并且由于使用百分比作为边距/填充会导致 flex/grid 项目的结果不一致（ _在较旧的浏览器版本上， 请参阅下面的编辑说明_），可以添加额外的包装器，或者像这里一样，使用伪元素，因此带有百分比的元素不是 flex/grid 项。

---

编辑： 请注意， 对规格进行了更新。 ，现在在弹性/网格项目上使用时应该给出一致的结果。但请注意，该问题仍然出现在旧版本上。

---

请注意，如果您要将内容添加到 content 元素，它需要是绝对位置以保持正方形的纵横比。

小提琴演示 - Flexbox

编辑 2： 在评论中，有人问我如何让文本居中，所以我在下面的代码段中添加了它。

 .square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;

  display: flex;               /* added for centered text */
  justify-content: center;     /* added for centered text */
  align-items: center;         /* added for centered text */
}

 <div class="square-container">

  <div class="square">
    <div class="content">
      <span>Some centered text</span>
    </div>
  </div>

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

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

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

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

</div>

---

CSS 网格版本

 .square-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  grid-gap: 10px;
}

.square {
  position: relative;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}

 <div class="square-container">

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

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

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

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

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

</div>

原文由 Asons 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以在所有现代浏览器中使用 CSS aspect-ratio 属性来实现这一点。

 .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}

.container div {
  aspect-ratio: 1 / 1;

  /* Styles below just for demo */
  background-color: orange;
  color: white;
  font-family: Arial;
  display: flex;
  justify-content: center;
  align-items: center;
}

 <div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
</div>

原文由 Vadim Ovchinnikov 发布，翻译遵循 CC BY-SA 4.0 许可协议