grid网格布局，如何理解template-columns属性中的auto-fit？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文描述的是grid-template-columns属性中，auto-fit的用法。和上一篇文章中的auto-fill有所不同的是：在父容器尺寸较大时，auto-fit + minmax()不创建新网格，auto-fill + minmax()则试图创建新的均分的网格。

大家好，这里是苏南大叔的“程序如此灵动”博客，这里记录苏南大叔的代码所学所想。本文描述grid中的auto-fill的使用方法。测试环境：win10，chrome。

前文回顾

这里先回顾一下相关知识点：

• https://newsn.net/say/grid-template.html
• https://newsn.net/say/grid-auto-columns.html
• https://newsn.net/say/grid-auto-fill.html

相比较grid-auto-columns的用于未知网格的尺寸默认值，auto-fit是无法确定列数时，repeat()去设置重复次数时所使用的关键字。

大多数情况下，使用auto-fill和auto-fit会得到一样的效果。所以，本文的auto-fit在大多数情况下，也是尽量去创建新的网格。共有两种使用姿势：

grid-template-columns: repeat(auto-fit, 100px);

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

grid-template-columns: repeat(auto-fit, )

对于grid-template-columns: repeat(auto-fit, )的情况，auto-fit和auto-fill的表现，时刻一致。

• 父容器宽度大的时候，两者都会创建带边角料的新网格。
• 父容器宽度小的时候，两者都会发生折行的现象，折行的第二行都可能会发生创建新的网格的情况。创建规则同上。

<div class="box"><div>fit,苏</div><div>南</div><div>大</div><div>叔</div></div>
<div class="box2"><div>fill,苏</div><div>南</div><div>大</div><div>叔</div></div>
<style>
  .box,.box2{
    display: grid;
    grid-gap: 2px;
    height: 80px;
    background: #ffeaa7;
    margin-top: 3px;
  }
  .box > div,.box2 > div { background: blue; color: white; }
  .box{ grid-template-columns: repeat(auto-fit, 120px); }
  .box2{ grid-template-columns: repeat(auto-fill, 120px); }
</style>

grid-template-columns: repeat(auto-fit, minmax( , ))

对于grid-template-columns: repeat(auto-fit, minmax( , ))的情况，auto-fit和auto-fill的表现，部分一致。

• 父容器宽度大的时候，auto-fit,minmax()并不创建新的网格，而是时刻均分。此时，auto-fill,minmax()在创建新的网格，并把剩余的宽度均分到已有网格上。
• 父容器宽度小的时候，两者表现一致，会折行。折行后的第二行会创建新的网格。新的网格创建规则，也是尽可能多的创建。剩余宽度均分到已有网格上。

<div class="box3"><div>fit,苏</div><div>南</div><div>大</div><div>叔</div></div>
<div class="box4"><div>fill,苏</div><div>南</div><div>大</div><div>叔</div></div>
<style>
  .box3,.box4{
    display: grid;
    grid-gap: 2px;
    height: 80px;
    background: #ffeaa7;
    margin-top: 3px;
  }
  .box3 > div,.box4 > div{ background: blue; color: white; }
  .box3{ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .box4{ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
</style>

相关链接

• https://newsn.net/say/css-grid.html
• https://newsn.net/say/grid-auto-flow.html
• https://newsn.net/say/grid-auto-flow-dense.html
• https://newsn.net/say/grid-template.html
• https://newsn.net/say/grid-template-areas.html
• https://newsn.net/say/grid-minmax.html
• https://newsn.net/say/grid-row.html
• https://newsn.net/say/grid-zindex.html
• https://newsn.net/say/grid-template-2.html
• https://newsn.net/say/grid-auto-fill.html

总结

更多苏南大叔的css经验文章，请点击下面的链接：

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。