我正在尝试创建由正方形组成的网格/布局。每行四个正方形。方块在屏幕大小调整时不会变形。宽度和高度必须始终相同(我不需要固定值)。我必须使用 CSS 网格。谁能帮我 ?
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 5px;
}
.container div {
background-color: red;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
仅使用 CSS,您可以使用伪元素来始终保持纵横比1:1
或使用新的aspect-ratio
财产,例如
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 5px;
}
.container div {
background-color: red;
aspect-ratio: 1;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)