问题描述
padding-bottom诀窍是最常用的技巧。
您可以将其与FlexBox和CSS Grid结合使用，由于对利润/填充使用百分比会导致弹性/网格项目的结果不一致，因此可以添加一个额外的包装器，或者在此处使用伪类，因此带有百分比的元素 不会弹性/网格项目。
编辑：请注意，对规格进行了更新。，现在在弹性/网格项目上使用时应能提供一致的结果。但是请注意，该问题 在较旧的版本上仍然会发生。
请注意，如果要向content元素添加内容，则它必须是绝对位置，以保持正方形的纵横比。
.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%;
}
<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>
CSS Grid version
.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>
解决方法
我想创建一个带有响应正方形的网格布局。
我觉得我应该可以使用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进行更进一步的操作，并能够使用空格之间的间距使正方形与漂亮的装订线对齐，但仍在努力使高度
与每个正方形的宽度相匹配。
我无法找到使用flexbox或grid 完成此操作的任何示例，但任何示例也将不胜感激。