精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
CSS的网格函数有哪些-创新互联
这篇文章主要介绍CSS的网格函数有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联公司专注于企业
营销型网站、网站重做改版、陈仓网站定制设计、自适应品牌网站建设、
H5页面制作、
商城网站开发、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为陈仓等各大城市提供网站开发制作服务。
CSS中的网格函数：fit-content()、minmax()、repeat()。
这3个函数都只能在网格布局中使用
fit-content()
fit-content函数，接收一个参数，长度值，可以按照字面意思来解释他的作用，"适应内容"。
test1dsssss3333333 sssssssssssssss sssssssssssssssssss sssssssssssssssssss ssssssssssssssssssss 这是用了fit-content(400px)
test2 这是固定宽度width：400px
test3 这是fit-content(400px)
.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参数，这两个参数表示内容短和最长的内容长度。看下面案例。
test1dsssss3333333 sssssssssssssss sssssssssssssssssss
sssssssssssssssssss ssssssssssssssssssss
test2222222222
test 232232323233
min-content采用短的内容长度
test
test 232232323233222222
max-content采用最长的内容长度
.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个参数，第一个参数表示执行次数，第二个参数表示长度。看下面例子
test1 3
test2 23
test3 444
.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表示由浏览器自动根据项目填充次数。当容器很宽的时候，会自动留出剩余格子的宽度。如果网格容器在相关轴上具有确定的大小或较大大小，则重复次数是较大可能的正整数，不会导致网格溢出其网格容器。
test1 3
test2 23
test3 444
test3 4444
test3 444
test3 444
grid-template-columns: repeat(auto-fill, minmax(100px,1fr));
效果
auto-fit
auto-fit也会自动计算，但是与auto-fill不同的是，auto-fit不会保留剩余的空格子，会将auto-fill剩余的空格子重新分配到每个格子中。看下面示例
test1 3
test2 23
test3 444
test3 4444
test3 444
test3 444
grid-template-columns: repeat(auto-fit, minmax(100px,1fr));
效果
兼容性
新版本的主流浏览器基本都能支持，依旧不支持ie。
以上是“CSS的网格函数有哪些”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
本文题目：CSS的网格函数有哪些-创新互联
本文来源：http://cdkjz.cn/article/ccdehc.html
