具有响应方块的网格布局

Question

我想创建一个网格布局与响应方块。

我觉得我应该可以这样做与CSS网格布局，但有麻烦设置高度每个正方形等于宽度。

在每一个方块之间设置一条阴沟也有困难。

我用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做得更远一些，并且能够使用空隙将正方形与一个很好的阴沟对齐，但是仍然在努力获得与每个正方形的宽度相匹配的高度。

我没有找到任何这样做的例子，无论是flexbox或grid，但任何例子都将是赞赏的。

谢谢

Answer 1

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

您可以将它与Flexbox和CSS Grid结合起来，并且由于使用percent作为边距/填充会给Flex/Grid项带来不一致的结果（在较旧的浏览器版本中，请参见下面的编辑注释），因此可以添加一个额外的包装，或者像这里一样，使用pseudo，因此带有percent的元素不是Flex/Grid项。

编辑：注意，有一个更新的规范，现在应该给出一致的结果，当使用在Flex/Grid项目。但是请注意，这个问题仍然发生在旧版本上。

注意，如果要向content元素添加内容，则需要将其定位为绝对位置，以保持正方形的纵横比。

小提琴演示-Flexbox

编辑2：在一个评论中，有人问我如何有一个居中的文本，所以我在下面的片段中添加了这个内容。

null

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