在容器宽度内，auto-fill：可重复自动填充列数，不用像之前那样设定多少列数；auto-fit：有多少个网格项来确定可以有多少网格列

auto-fill、auto-fit要在repeat()中结合其他函数一起使用才有效，一般结合minmax()使用。

minmax设置最小最大的列宽范围，一般在repeat()中结合auto-fill、auto-fit使用发挥用处大。

网格相关的函数：

1、repeat(重复的次数，每一个的值);  跟踪列表的重复片段，允许大量显示重复模式的列或行以更紧凑的形式编写

如   grid-template-columns：repeat(5,1fr)；

等同于   grid-template-columns：1fr 1fr 1fr 1fr 1fr；

2、fit-content(宽度);  根据min（最大大小，max（最小大小，参数））将给定大小夹紧为可用大小，若小于给定的大小，就压缩到最小的宽度大小

如  grid-template-columns：100px fit-content(200px) 10% 1fr；

3、minmax(最小值，最大值);   定义一个长宽范围的闭区间

grid不固定几列

minmax()

--定义了一个长宽范围的闭区间

语法

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

参数说明

flex:单位为fr的非负维度，指定轨道弹性布局的系数值。

min-content:自适应内容最大的那个单元格

max-content:自适应内容最小的那个单元格

auto:作为最大值，等价于max-content.作为最小值时，它表示轨道中单元格最小宽度（由min-width/min-height）的最大值。