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

一、简介

在之前的文章中我们详细讨论了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自适应关键字

分别是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-content

fit-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接受两种类型的参数，一般长度值和百分比表示。

六、calc

calc()函数可以用于任何地方，支持多种数据类型，允许你动态计算CSS的属性值，calc()函数的使用形式：calc(运算表达式)。

运算操作支持加减乘除，如calc(100% – 200px)，表示父容器的总宽度减去200像素，注意”-”操作符两边要留空白。

例子：

.container .item-02{
    width: calc(100% - 12px);
    height: 100px;
}

七、repeat

repeat() CSS函数代表一个轨道列表的重复片段，允许具有固定模式的行列写成更见简单紧凑的方式。

该方法常用CSS Grid网格布局grid-template-columns/rows的属性设置，除了允许传入多种参数外，它接受两个参数：行列的数量和宽度的大小，形式如下：

repeat(number of columns/rows, the column width we want);

例子：

.grid{
    display: grid;
    grid-template-columns: 200px repeat(5, 1fr) 100px repeat(3,50px);
    grid-template-rows: 50px;
    grid-column-gap: 20px;
}