响应式Grid布局-按比例响应

响应式Grid布局

Grid布局目前来说应该算是最热门的布局方式了。比Flex布局更加灵活，对于响应式布局设计来说，也是非常方便。甚至一行代码就可以实现响应布局。

以下代码就现一个自动填充的响应布局。

(代码来源网络、这里借助演示一下)

    .wrapper {
        margin: 50px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-gap: 10px 20px;
        grid-auto-rows: 50px;
    }

效果如下：

元素按比例响应

通过上面的例子，可以很好的做一个响应式的效果。

在某些业务场景，或者某种情况下，需要做到子元素的宽，高按照比例进行响应。

通过上面的代码，其实我们可以发现，代码只进行网站的列宽度响应 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));,通过设置列宽为一个范围进行响应。

对于高度来说，还是固定的grid-auto-rows: 50px;

所以我们得围绕怎么设置高度来思考。

元素纵横比

最直接的解决方案、就是给元素设置元素纵横比aspect-ratio

MDN解释:

aspect-ratio CSS 属性为 box 容器规定了一个期待的纵横比，这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。

这个属性比较简单、直接给元素设置比例就行

    .wrapper {
        margin: 50px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-gap: 10px 20px;
        //grid-auto-rows: 50px; //首先删除这行
    }
    .item {
      text-align: center;
      font-size: 200%;
      color: #fff;
      aspect-ratio:1/1; //子元素添加这行代码
    }
    

效果如下：

兼容性

看上去很完美，但是这个属性兼容不行，某些版本的浏览器可能不支持！这里采用特殊的方案来实现元素纵横比。

那就利用padding属性，padding属性的值如果是百分比，那么它相对的是父元素的宽。

padding属性

利用这一特性、我们可以实现这个比例。

核心代码：

    .item::before {
      content: " ";
      /* 设为块元素，宽度撑满 */
      display: block;
      /* padding百分比是取的父元素的宽度 */
      padding-bottom: 100%;
      /* 宽度是父元素的宽度，高度是父元素的宽度，这样就是一个1比1的正方形了 */
    }
    .content{
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      top:0;
    }

如果想换成16/9,就把padding-bottom:56.25%；(6除以19)

点这里查看demo

总结

• Grid响应式布局属性:minmax,auto-fit
• 元素纵横比:aspect-ratio
• padding的百分比值是相对父元素的宽度