fit-content()函数

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