css3的grid格子布局中,对于设置格子大小的处理,要么是固定的,要么是百分比这种相对的。

如果电脑端这个header的高度为50px,而手机端由于大小限制,原来50px可能要变成30px,那么此时我们可以利用媒体查询去调整:grid-template-rows属性。

grid-template-rows: 30px 1fr;

调整完这个大小后,我们还要调整里面元素的大小,这样做可能有点麻烦。

甚至于我们可能只是改变了里面元素的布局而已,横向的布局改为竖列的多行布局,那么这个高度可能是无法精确获取的,如果内容的高度为100px呢,而我们只设置了30px

grid的默认效果会是一个overflow: hidden;也就是说元素会将超出部分自动截断,这显然不符合我们的需求。

fit-content()是一个非常有用的函数,虽然他的官方说明和实际效果有点出入,且只能用于grid中。

这个函数接收两个参数,第二个参数没什么用,懒得说了,第一个参数为元素内容过多时,最大也只能是传入的参数大小,比如我传入一个20px;那么不管元素包含的内容有多大,容器只有20px。

然而这个解释已经过时了,现在fit-content()传入的第一个参数没有实际作用了,但是不传又不行,传了,不管元素大小怎么变化,容器大小永远为最小的内容大小。

不传被视为auto了,所以这个要注意。

可能这里有人要讲,css3不是还有一个fit-content的属性值吗,然而这个属性浏览器还是需要加浏览器前缀的,在grid中也不支持使用该属性,而只能用于width的css设置。

所以用处有点局限性了。

例子:

.grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, [col-start] 25% [col-end]);
  grid-template-rows: 200px auto fit-content(20px);
}
分类: CSS 标签: 暂无标签

评论

暂无评论数据

暂无评论数据

目录