这3个函数都只能在网格布局中应用

fit-content()

fit-content函数，接管一个参数，长度值，能够依照字面意思来解释他的作用，"适应内容"。

<div class="fit-content-wrapper">  <div class="fit-item item1">test1dsssss3333333 sssssssssssssss sssssssssssssssssss sssssssssssssssssss ssssssssssssssssssss 这是用了fit-content(400px)</div>  <div class="fit-item item2">test2 这是固定宽度width：400px</div>  <div class="fit-item item3">test3 这是fit-content(400px)</div></div>  .fit-content-wrapper{    width: 100%;    height: 200px;    display: grid;    grid-template-columns: fit-content(400px) 400px fit-content(400px);    grid-gap: 10px;  }  .fit-item{    background-color: rgb(20, 106, 177);  }

成果

能够看到,当内容长度大于给定长度时，文字会主动换行，不会超过给定长度，当内容长度小于给定长度时，会依照给定的内容长度设置长度。

兼容性

兼容性对于古代浏览器没有什么问题，新版本支流浏览器根本都能反对，对于须要反对ie的我的项目则不能应用。

minmax()

minmax函数示意一个闭区间范畴[min,max]，当值小于等于min时，值等于min,当大于等于max时，值等于max.

min-content，max-content

minmax函数接管min-content,max-content参数，这两个参数示意内容最短和最长的内容长度。看上面案例。

    <div class="minmax-wrapper">      <div class="minmax-item">        test1dsssss3333333 sssssssssssssss sssssssssssssssssss        sssssssssssssssssss ssssssssssssssssssss      </div>      <div class="minmax-item">        <p>test2222222222</p>        <p>test 232232323233</p>        <p>min-content采纳最短的内容长度</p>      </div>      <div class="minmax-item">        <p>test</p>        <p>test 232232323233222222</p>        <p>max-content采纳最长的内容长度</p>      </div>    </div>      .minmax-wrapper {        margin-top: 100px;        width: 100vw;        display: grid;        grid-gap: 10px;        grid-template-columns:          minmax(300px, 500px) minmax(50px, min-content)          minmax(100px, max-content);      }

成果

能够看到，第二个我的项目的最小的内容宽度为第二个我的项目中的第一个p标签

当设置成minmax(50px,min-content)时，示意列宽最大的宽度也不能超过第一个p标签的内容宽度。

第三个我的项目的最大的内容宽度为第三个p标签的内容宽度

当设置成minmax(100px,max-content)时，最大的内容宽度不会超过第三个p标签的宽度

兼容性

跟fit-content函数一样，不反对ie,但对支流的古代浏览器反对还不错。

repeat()

repeat函数用来批量解决网格，接管2个参数，第一个参数示意执行次数，第二个参数示意长度。看上面例子

    <div class="repeat-wrapper">      <div class="repeat-item">test1 3</div>      <div class="repeat-item">test2 23</div>      <div class="repeat-item">test3 444</div>    </div>      .repeat-wrapper {        margin-top: 100px;        display: grid;        grid-template-columns: repeat(3, 100px);        grid-gap: 10px;      }

成果

grid-template-columns: repeat(3, 100px) 等价于 grid-template-columns: 100px 100px 100px;

auto-fill,auto-fit

第一个参数除了指明具体次数外，repeat还接管这几个参数 auto-fill,auto-fit，上面讲一讲这两个参数的概念。

auto-fill

auto-fill示意由浏览器主动依据我的项目填充次数。当容器很宽的时候，会主动留出残余格子的宽度。如果网格容器在相干轴上具备确定的大小或最大大小，则反复次数是最大可能的正整数，不会导致网格溢出其网格容器。

    <div class="repeat-wrapper">      <div class="repeat-item">test1 3</div>      <div class="repeat-item">test2 23</div>      <div class="repeat-item">test3 444</div>      <div class="repeat-item">test3 4444</div>      <div class="repeat-item">test3 444</div>      <div class="repeat-item">test3 444</div>    </div>grid-template-columns: repeat(auto-fill, minmax(100px,1fr));

成果

auto-fit

auto-fit也会主动计算，然而与auto-fill不同的是，auto-fit不会保留残余的空格子，会将auto-fill残余的空格子重新分配到每个格子中。看上面示例

    <div class="repeat-wrapper">      <div class="repeat-item">test1 3</div>      <div class="repeat-item">test2 23</div>      <div class="repeat-item">test3 444</div>      <div class="repeat-item">test3 4444</div>      <div class="repeat-item">test3 444</div>      <div class="repeat-item">test3 444</div>    </div>grid-template-columns: repeat(auto-fit, minmax(100px,1fr));

成果

兼容性

最新版本的支流浏览器根本都能反对，仍旧不反对ie。

总结

这3个网格函数极大的丰盛的网格布局，之前用网格布局用的不多，然而明天学习这3个函数以及相干的一些参数后，发现网格布局比照其余布局也是很不便的，前面在一些本人的小我的项目中能够试着用一下.

最初

我最近在总结css函数相干的货色，这篇是系列文章的第四篇，目前已产出

  • CSS函数那些事（一）比拟函数
  • CSS 函数那些事（二）你不晓得的 attr()")
  • CSS函数那些事（三）背景图片函数

我的项目中会蕴含文章中的测试代码，都做好了相应的分类，欢送各位继续关注，有帮忙话能够点个赞哦！我的项目地址戳这里