padding-bottom诀窍是最常用的技巧。
您可以将其与Flex@R_117_2419@和CSS Grid结合使用，由于对利润/填充使用百分比会导致弹性/网格项目的结果不一致，因此可以添加一个额外的包装器，或者在此处使用伪类，因此带有百分比的元素 不会弹性/网格项目。
编辑：请注意，对规格进行了更新。，现在在弹性/网格项目上使用时应能提供一致的结果。但是请注意，该问题 在较旧的版本上仍然会发生。
请注意，如果要向content元素添加内容，则它必须是绝对位置，以保持正方形的纵横比。
.square-container {
display: flex;
flex-wrap: wrap;
}
.square {
position: relative;
flex-basis: calc(33.333% - 10px);
margin: 5px;
border: 1px solid;
@R_117_2419@-sizing: border-@R_117_2419@;
}
.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;
@R_117_2419@-sizing: border-@R_117_2419@;
}
.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>
602392714
清零编程群