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

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

苏南大叔:grid网格布局,如何理解template-columns属性中的auto-fill? - grid-auto-fill
grid网格布局,如何理解template-columns属性中的auto-fill?(图6-1)

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

前文回顾

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

相比较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)”的宽度。也就是说,存在着不成网格的边角部分,网格宽度固定。

苏南大叔:grid网格布局,如何理解template-columns属性中的auto-fill? - columns-repeat-1
grid网格布局,如何理解template-columns属性中的auto-fill?(图6-2)

用例二,网格可变宽度

<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>

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

苏南大叔:grid网格布局,如何理解template-columns属性中的auto-fill? - columns-repeat-2
grid网格布局,如何理解template-columns属性中的auto-fill?(图6-3)

用例三,破坏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>

苏南大叔:grid网格布局,如何理解template-columns属性中的auto-fill? - columns-repeat-3
grid网格布局,如何理解template-columns属性中的auto-fill?(图6-4)

用例四,错误作用到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>

苏南大叔:grid网格布局,如何理解template-columns属性中的auto-fill? - columns-repeat-4
grid网格布局,如何理解template-columns属性中的auto-fill?(图6-5)

auto-fill总结

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

苏南大叔:grid网格布局,如何理解template-columns属性中的auto-fill? - columns-repeat-5
grid网格布局,如何理解template-columns属性中的auto-fill?(图6-6)

写法网格宽度边角
repeat(auto-fill, 100px)固定100px可能存在
repeat(auto-fill, minmax(100px, 1fr))在100px和一个大点的值之间变化绝对不存在

可见:

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

相关链接

总结

更多css文章,请点击下面的链接:

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css