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

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

本文继续解读grid-template中的特殊属性的特殊用法，特殊属性是：grid-template-columns，特殊用法是auto-fill常量。效果是grid网格无限增加的时候，已有的网格可以根据后续的网格的增加情况进行宽度的动态调整。这也是有别于grid-auto-columns属性的地方。

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

前文回顾

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

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

相比较grid-auto-columns的用于未知网格的尺寸默认值，本文的auto-fill是在尽量最大限度增加网格。auto-fill是无法确定列数时，repeat()去设置重复次数时所使用的关键字。使用姿势是：

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

而且auto-fill是在尽量最大限度增加网格，也是可能会折行后在下一行最大限度增加网格数哦。

用例一，网格固定宽度

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

第一个网格布局里面，父元素根据自己的宽度变化，创建着“取整(父容器宽度 除以 100px)”个格子，剩余“取余(父容器宽度 除以 100px)”的宽度。也就是说，存在着不成网格的边角部分，网格宽度固定。

用例二，网格可变宽度

<div class="box">
  <div>苏</div>
  <div>南</div>
  <div>大</div>
  <div>叔</div>
</div>
<style>
  .box {
    height: 200px;
    background: #ffeaa7;
    margin-top:3px;
    display: grid;
    grid-gap: 10px;
    /* grid-template-columns: repeat(auto-fill, 100px); */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  .box > div{
    background: blue;
    color: white;
  }
</style>

第二个网格布局里面，父容器根据自己的宽度变化，创建着尽可能多的格子，然后剩余的不够一个格子的空间再平均给大家。也就是说，并不存在网格边角料。格子宽度可变，并且是弹簧式可变。

用例三，破坏auto-fill作用

<div class="box">
  <div>苏</div>
  <div>南</div>
  <div>大</div>
  <div>叔</div>
</div>
<style>
  .box {
    height: 200px;
    background: #ffeaa7;
    margin-top:3px;
    display: grid;
    grid-gap: 10px;
    /* grid-template-columns: repeat(auto-fill, 100px); */
    /* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) 2fr;
    grid-auto-flow: column;
  }
  .box > div{
    background: blue;
    color: white;
  }
</style>

用例四，错误作用到rows上

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

auto-fill总结

• 多余的网格，并不是由于子元素的出现而产生的。而是由于父元素的宽度大于已有子元素需要的宽度总和，父元素尽力创建了新的格子。这个时候，每个格子都是具有相同宽度的。
• 当然，当子元素的宽度总和大于父元素能够提供的宽度总和的时候，也会自动折行。折行后产生的空白位置符合上述规则。

可见：

• 绝对平分属性是由minmax()函数所带来的。
• 使用auto-fill的时候只作用于grid-template-columns的repeat()函数上，并且只能单独出现。

相关链接

• 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

总结

更多css文章，请点击下面的链接：

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

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