CSS的网格函数有哪些-四川平武建站

新闻中心

这里有您想知道的互联网营销解决方案

CSS的网格函数有哪些

这篇文章主要介绍CSS的网格函数有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

管城网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作，到程序开发，运营维护。创新互联建站于2013年开始到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。

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); }

效果

CSS的网格函数有哪些

可以看到,当内容长度大于给定长度时，文字会自动换行，不会超过给定长度，当内容长度小于给定长度时，会按照给定的内容长度设置长度。

兼容性

CSS的网格函数有哪些

兼容性对于现代浏览器没有什么问题，新版本主流浏览器基本都能支持，对于需要支持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); }

效果

CSS的网格函数有哪些