html - 具有持久纵横比的响应式 CSS 网格

Question

我的目标是创建一个具有未知数量元素的响应式网格，并使它们的宽高比保持在 16:9。 现在它看起来像这样:

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 160px);
    grid-template-rows: 1fr;
    grid-gap: 20px;
 }
.item {
    height: 90px;
    background: grey;
}

<div class="grid">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
</div>

问题是，元素不会随着屏幕尺寸缩放，导致在正确的位置出现边距。但是，当使用例如 grid-template-columns: repeat(auto-fit, minmax(160p, 1fr)) 并删除 height: 90px;< 使网格适应屏幕尺寸时，宽高比不保持不变。

也许没有 css grid 有更好的解决方案？ (也许使用 javascript)

Answer 1

您可以利用百分比填充基于宽度这一事实。

This CSS-tricks article很好地解释了这个想法:

...if you had an element that is 500px wide, and padding-top of 100%, the padding-top would be 500px.

Isn't that a perfect square, 500px × 500px? Yes, it is! An aspect ratio!

If we force the height of the element to zero (height: 0;) and don't have any borders. Then padding will be the only part of the box model affecting the height, and we'll have our square.

Now imagine instead of 100% top padding, we used 56.25%. That happens to be a perfect 16:9 ratio! (9 / 16 = 0.5625).

所以为了让列保持纵横比:

1. 按照您的建议设置列宽:

   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))
   

2. 向元素添加伪元素以保持 16:9 的纵横比:

   .item:before {
     content: "";
     display: block;
     height: 0;
     width: 0;
     padding-bottom: calc(9/16 * 100%);
   }
   

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-template-rows: 1fr;
  grid-gap: 20px;
}
.item {
  background: grey;
  display: flex;
  justify-content: center;
}
.item:before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  padding-bottom: calc(9/16 * 100%);
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Codepen Demo (调整大小看效果)