介绍 & lt; div 类=癴it-content-wrapper"比;
& lt;才能div 类=癴it-item item1"祝辞test1dsssss3333333 sssssssssssssss sssssssssssssssssss sssssssssssssssssss ssssssssssssssssssss 这是用了适合内容(400 px) & lt;/div>
& lt;才能div 类=癴it-item item2"祝辞test2 这是固定宽度宽度:400 px
& lt;才能div 类=癴it-item item3"祝辞test3 这是适合内容(400 px) & lt;/div>
& lt;/div>
.fit-content-wrapper{才能
,,,宽度:,100%;
,,,身高:,200 px;
,,,显示:,网格;
,,,grid-template-columns:,适合内容(400 px), 400 px 适合内容(400 px);
,,,grid-gap:, 10 px;
,,}
.fit-item{才能
background - color,,,:, rgb (20,, 106,, 177);
以前,,} 这篇文章主要介绍CSS的网格函数有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
CSS中的网格函数:适合内容(),极大极小(),重复()。
这3个函数<强>都只能在网格布局中使用
<强>适合内容()
适合内容函数,接收一个参数,长度值,可以按照字面意思来解释他的作用,“适应内容“。
效果
可以看的到,<强>当内容长度大于给定长度时,文字会自动换行,不会超过给定长度,当内容长度小于给定长度时,会按照给定的内容长度设置长度。
<强>兼容性
兼容性对于现代浏览器没有什么问题,新版本主流浏览器基本都能支持,对于需要支持ie的项目则不能使用。
<强>极大极小()
极大极小函数表示一个闭区间范围最小,最大,当值小于等于最小值时,值等于最小值,当大于等于最大值时,值等于max。
<强> min-content, max-content
极大极小函数接收min-content, max-content参数,这两个参数表示内容最短和最长的内容长度。看下面案例。
效果
可以看的到,第二个项目的最小的内容宽度为第二个项目中的第一个p标签
当设置成极大极小(50 px, min-content)时,表示列宽最大的宽度也不能超过第一个p标签的内容宽度。
第三个项目的最大的内容宽度为第三个p标签的内容宽度
当设置成极大极小(100 px, max-content)时,最大的内容宽度不会超过第三个p标签的宽度
<强>兼容性
跟适合内容函数一样,不支持,但对主流的现代浏览器支持还不错。
<强>重复()
重复函数用来批量处理网格,接收2个参数,第一个参数表示执行次数,第二个参数表示长度。看下面例子
