具有持久纵横比的响应式 CSS 网格 [英] Responsive CSS Grid with persistent aspect ratio

问题描述

我的目标是创建一个具有未知数量项目的响应式网格，使它们的纵横比保持在 16:9.现在看起来像这样:

.grid {显示:网格；网格模板列:重复(自动填充，160 像素)；网格模板行:1fr；网格间距:20px；}.物品 {高度:90px；背景:灰色；}

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

问题是，项目不会随着屏幕尺寸缩放，导致在正确的站点上有一个边距.但是当使网格适应屏幕大小时，例如:grid-template-columns: repeat(auto-fit, minmax(160p, 1fr)) 并删除 height: 90px;，纵横比不会持续.

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

解决方案

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

这篇 CSS-tricks 文章很好地解释了这个想法:

<块引用>

...如果你有一个 500px 宽的元素，padding-top 为 100%，padding-top 为 500px.

这不是一个完美的正方形，500px × 500px 吗?是的！一个方面比例！

如果我们强制元素的高度为零(高度:0;)并且不有任何边界.然后填充将是盒子模型的唯一部分影响高度，我们将得到我们的正方形.

现在想象一下，我们使用了 56.25%，而不是 100% 的顶部填充.那个会发生成为完美的16:9比例！(9/16 = 0.5625).

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

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

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

2. 为items添加一个伪元素以保持16:9的纵横比:

   .item:before {内容:《》；显示:块；高度:0；宽度:0；填充底部:计算(9/16 * 100％)；}

.grid {显示:网格；网格模板列:重复(自动适应，minmax(160px，1fr))；网格模板行:1fr；网格间距:20px；}.物品 {背景:灰色；显示:弹性；对齐内容:居中；}.item:before {内容: "";显示:块；高度:0；宽度:0；填充底部:计算(9/16 * 100％)；}

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

Codepen Demo(调整大小看效果)

My goal is to create a responsive grid with an unknown amount of items, that keep their aspect ratio at 16 : 9. Right now it looks like this:

.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>

The problem is, that the items won't scale with the screen size, resulting in a margin at the right site. But when making the grid adapt to the screen size with e.g.: grid-template-columns: repeat(auto-fit, minmax(160p, 1fr)) and removing the height: 90px;, the aspect ratio doesn't persist.

Maybe there is a better solution without css grid? (Maybe using javascript)

解决方案

You could take advantage of the fact that padding in percentages is based on width.

This CSS-tricks article explains the idea quite well:

...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).

So in order for the columns to maintain aspect ratio:

1. Set the column widths as you suggested:

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

2. Add a pseudo element to the items to maintain the 16:9 aspect ratio:

   .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 (Resize to see the effect)

这篇关于具有持久纵横比的响应式 CSS 网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！