我想创建一个网格布局与响应方块。
我觉得我应该可以这样做与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，但任何例子都将是赞赏的。
谢谢
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>