如何更容易地快速学会网格布局（CSS Grid Layout内容补充（四）） _fit-content

一、简介在之前的文章中我们详细讨论了CSS Grid网格布局系统，但是还是有很多细节未能提及，本文是对Grid网格布局中的一些细节的补充。主要针对网格布局中会使用到的函数和单位，比如常用的repeat函数，fr单位等，这些概念提供更灵活的布局设计，现在我们来一起学习更多高级布局属性。
二、< flex> 单位< flex> 是CSS中的一种数据类型，数据类型由放置在”< ”和”> ”之间的关键字表示。比如我们常用的用来设置颜色的color: #FFF，color属性接受的#FFF就是一种数据类型< color> 。
这里的< flex> 就是一种数据类型，由数值和单位fr组成，如2fr。
Fr单位常用在Grid网格布局中，用于grid-template-columns、grid-template-rows的相关设置。下面我们看看fr单位在网格布局中是如何发挥作用的。
首先考虑最简单的情形：

.grid{ display: grid; grid-template-columns: 1fr; grid-template-rows: 50px; }

文章图片
可以看到单独设置网格轨道大小为1fr，该轨道就占据了一行。继续看：

.grid{ display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 50px; grid-column-gap: 20px; }

文章图片
是不是按比例分配了？现在你大概看出fr单位的作用了吧。Fr单位表示网格容器中的可变长度，可以使用fr来定义网格轨道大小的弹性系数。
所以上面代码中1fr 2fr表示两个轨道大小比例为1:2 。
三、CSS3自适应关键字【如何更容易地快速学会网格布局（CSS Grid Layout内容补充（四））】分别是fill-content和fit-content，max-content和min-content，他们两两相对应。前者是以元素为中心，设置元素自身的内容填充方式：充满还是收缩；后者以容器为中心，容器根据自身的子元素的宽度设置自身的宽度。
1）元素自身的内容填充方式

.container{ height: 100px; } .container .item{ background-color: #ff8266; height: -webkit-fill-available; }

文章图片
该布局中子元素的高度height设置为-webkit-fill-available，子元素的高度自动填充容器的高度。设置width也是同样的道理，自动填充容器的宽度。

文章图片
和fill-available意思相反的是fit-content 收缩内容
2）容器宽度由子元素决定

.container{ background-color: #af8f65; height: 200px; width: -webkit-max-content; } .container .item-01{ background-color: #ff8266; width: 80px; height: 100px; } .container .item-02{ background-color: #87beff; width: 150px; height: 100px; }

文章图片
容器设置宽度的采用方式为-webkit-max-content，由于item-01的宽度比item-02的宽度小，所以容器的宽度最后是采用item-02的。
Min-content和max-content相反，不过不同的是，采取宽度值最小中最大的那个。容器中可以容纳图片、文字、或其它html元素，将每个类型的元素中的最小值找到，进行比较，取最大的一个。图片的宽度值是图片宽度，文字英文一个单词是一个宽度值，中文一个字为一个宽度值。
四、minmax()介绍minmax（最小值，最大值），用于设置长宽的区间范围，需要注意的是，如果最大值小于最小值，那么最后是最小值。< flex> （fr作单位）作为最小值无效，作最大值表示网格轨道的弹性系数。

.grid{ display: grid; grid-template-columns: minmax(max-content,200px) minmax(100px,1fr); grid-template-rows: 50px; grid-column-gap: 20px; }.grid .item{ background-color: #ff8266; }

文章图片
Minmax两个参数可接受的数据类型除了我们平时常用的像素值表示，百分比和auto，还可以使用刚刚介绍的< flex> 类型，max-content和min-content。
完整语法如下：

minmax( [ < length> | < percentage> | < flex> | min-content | max-content | auto ] , [ < length> | < percentage> | < flex> | min-content | max-content | auto ] )

percentage是百分比的意思。
五、fit-contentfit-content()将一个固定值转为可用大小的值，其转换计算公式为（argument为输入值）：

min(maximum size, max(minimum size, argument))

该函数常用于CSS Grid网格布局，其中maximum的大小由max-content定义，minimum的大小由auto定义。
Fit-content也可以用于定义盒子模型的大小，诸如width，max-width，其中maximum的大小指的是最大内容大小，minimum大小指的是最小内容大小。
Fit-conent接受两种类型的参数，一般长度值和百分比表示。
六、calccalc()函数可以用于任何地方，支持多种数据类型，允许你动态计算CSS的属性值，calc()函数的使用形式：calc(运算表达式)。
运算操作支持加减乘除，如calc(100% – 200px)，表示父容器的总宽度减去200像素，注意”-”操作符两边要留空白。
例子：