显示3列，

max-content：列宽为内容的最大宽度，min-content：列宽为内容的最小宽度。

repeat()

--跟踪列表的重复片段，允许大量显示重复模式的列或行以更紧凑的形式编写

语法

grid-template-columns:repeat(repeat,values);

grid-template-rows:repeat(repeat,values);

参数说明

repeat:<number> | auto-fill | auto-fit

number:列的宽度或行的高度，可以为fr,px,%，max-content,min-content,auto等

auto-fill:以网格项为准自动填充，即当宽度够时，自动在列上填充空的单元格。

auto-fit:以网格容器为准自动填充。

注意

1，auto-fill和auto-fit必须结合minmax()使用才生效，具体数值是无效的。

    例：repeat(auto-fill,minmax(100px,300px));

2，只适用于grid-template-columns和grid-template-rows

repeat的混合写法

repeat() 只能用在已有的元素上