我在css中使用网格框。网格中的每个项目必须是容器宽度的1/3。我希望每个项目的长宽比是2/1，这意味着宽度应该总是高度的两倍。如果容器的大小调整，我希望项目也调整大小，同时保持长宽比。我该怎么做？
CSS：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}
.grid-item {
background-color: orange;
border: solid;
}
html：
<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
您需要您的网格项跨越它们在网格中的位置。只要浏览器对纵横比的支持不完整，您就可以使用padding-技巧：
.grid-item {
position: relative;
display: flow-root;
&:before {
content: '';
float: left;
padding-top: 50%;
}
}
