Grid布局宽度自适应中auto-fit和auto-fill的区别

概述

CSS Grid 有个非常强大的功能 —— 模式填充（repeat-to-fill）列然后对内容进行自动布局。也就是说，开发者只需要指定列数，自适应方面的事情（视口尺寸小则显示列数少，反之则多）交给浏览器来处理就行了，不需要用媒体查询。

grid-template-columns: repeat(auto-fit || arto-fill, minmax(320px, 1fr));

以上代码意思是：每个子元素至少需要320px的宽度，如果视口宽度足够宽就分配给每个子元素，如果不够就换行，把分配不了的元素换行。没有子元素占据 (假如没有列间距) 的空间叫剩余空间。比如一行一共100px，两个子元素占据了80px，网格距离10px，那么还有10px的剩余空间。剩余空间的使用却决于使用了auto-fit 还是 arto-fill。

实例

Html代码

<div class="big">
        <div class="small"></div>
        <div class="small"></div>
</div>

Css代码

.big{
     max-width: 1200px;
     height: 100%;
     background-color: blueviolet;
     display: grid;
     grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
     /* grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); */
     grid-gap: 20px;
}
.small{
    height: 150px;
    background-color: aquamarine;
}

使用auto-fill

可以看到剩余空间会保留。

使用auto-fit

剩余空间会平均分配到子元素宽度中。

总结

使用 auto-fit 时，剩余空间会平均分配给子元素，内容区自动拉伸以便占满一整行；
使用 auto-fill 时，空列和子元素一样，都会其占用行空间，虽然空列没有实质性内容