css：带有网格模板的纵横比

Question

我在 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>

Answer 1

您需要您的网格项目跨越它们在网格中的位置。只要浏览器对纵横比的支持不完整，您就可以使用填充技巧：

.grid-item {
  position: relative;
  display: flow-root;

  &:before {
    content: '';
    float: left;
    padding-top: 50%;
  }
}