强大的grid和好用的object-fit

对于初次接触grid的同学来说，直接上手使用的时候可能没有那么顺畅，下面我将结合自己的使用经验，来给大家总结一下项目里常用的写法和思路。

 案例1

 本次给大家分享一种容器宽度和列数不固定，但是元素宽度固定的案例

<div class="box">
    <div class="item">元素</div>
    <div class="item">元素</div>
    <div class="item">元素</div>
    <div class="item">元素</div>
    <div class="item">元素</div>
</div>

.box {
    border: 1px solid black;
    width: 50vw;
    height: 350px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    grid-gap: 10px 10px;
  }

  .item {
    width: 100%;
    aspect-ratio: 1/1;
    background: pink;
    display: grid;
    place-items: center center;
    /* place-items: align-items justify-items; */
  }

以上代码通过设置grid-template-columns属性的第二个参数来达到确定元素宽度的作用，第一个参数再传自动填充，即可实现元素宽度固定，容器内元素随着容器宽度适应的效果。

这里再给大家展示一个新的属性place-items，可以在grid内一行代码实现上下左右居中布局！

案例2

下面是用gird实现一个常规list的思路

<div class="listbox">
    <img src="https://t10.baidu.com/it/u=3844842414,292040484&fm=58" alt="">
    <div class="listTitle">这是标题</div>
    <div class="listContent">这是一段介绍这是一段介绍这是一段介绍这是一段介绍这是一段介绍这是一段介绍这是一段介绍</div>
 </div>

.listbox {
    width: 500px;
    padding: 10px;
    border: 1px solid black;
    display: grid;
    grid-template-columns: 20% 80%;
    grid-template-rows: 1fr 1fr;
    place-items: center start;
  }

.listbox img {
    width: 80px;
    height: 80px;
    grid-row: 1 / 3;
    grid-column: 1 / 2;
  }

.listTitle {
    font-weight: bold;
    font-size: 20px;
    grid-row: 1 / 2;
    grid-column: 2 / 3;
  }

.listContent {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
  }

上述代码首先是给list容器划分为横竖各两个网格，然后通过grid-row和grid-column设置每个元素在网格汇中横向和纵向所处的分割线，最终实现布局，相比传统的flex，省去一个包裹右侧文字的dom节点。

浏览器兼容性

 图片自适应新方案object-fit

说到图片在容器的自适应，大家第一时间可能想到的就是background-size的解决方案，但是在有些场景下我们可能需要用到img标签来展示图片，那么background-size就不那么适用了，这时候就轮到object-fit登场了。它拥有和background-size相似的属性，来使得img标签展示的图片可以跟background-size拥有一样的自适应展示效果。

案例1

 <div class="imgbox">
    <img src="https://i0.hdslb.com/bfs/vc/4e7edb416c34eccc40f34d2b297524652685a9bb.png@1c.webp" alt="">
  </div>

  <div class="imgbox">
    <img
      src=" https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F29%2F20210629142529_8f67b.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1697891239&t=f50fc5f0dbabda5a848fcf41f4f1cb05"
      alt="">
  </div>

.imgbox {
    width: 300px;
    height: 300px;
    border: 1px solid red;
  }

.imgbox img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

上述案例可以让长宽比不通的图片在容器内自适应铺满，且不变形。现在img标签的自适应变得跟background-size的实现方案一样轻松。

另外，我们还可以再次基础上，直接给图片添加背景色，如下案例直接给图片本身添加background-color即可

.imgbox img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: pink;
  }

案例2

既然object-fit的效果和background-size如此相似，那么作为头像的展示也是非常合适的

  <img class="photo"
    src=" https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F29%2F20210629142529_8f67b.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1697891239&t=f50fc5f0dbabda5a848fcf41f4f1cb05"
    alt="">

.photo {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    overflow: hidden;
    object-fit: cover;
  }

浏览器兼容性

总结

今天给大家分享了gird和object-fit的实战用法，两者都是非常好用的自适应布局方式，两种方案也可以一起使用，可以大幅度减少布局需要js介入的可能性。熟练使用后方可在开发时达到事半功倍的效果。