可能是兼容问题，我也设置了：grid-template-columns: 10% 200px auto 3fr 2fr;以后，显示出来的效果是：中间的auto那一列占据了剩余的所有空间，而后两列刚刚好挤着，宽度各为100。

所以，应该是当auto和fr单位一同出现的时候，auto先尽可能大的占据空间，fr只能尽可能地占用小的空间

grid-template

属性值

轨道大小（track-size）：px/em/%/fr（分数）/auto(剩余部分)

grid-template-columns列

grid-template-rows 行

在网格布局中，如果有网格项数目形成的网格行数多于css中定义的网格行数，那么网格行数就会自动增加，且都会设置为auto，在实际的网格布局是，需要考虑这个行数设置的问题，最好是设置为auto，会进行平均分配高度

如图，定义后的实际表现效果，设置为auto就是剩下的距离都给这个行或者列，使用fr单位可以形成宽度自适应的效果，也可以和px单位进行合用

行和列的属性值的定义

以grid-template-columns和grid-template-rows来定义网格的列和行

width:1000px;height:1500px;

display:grid;

grid-tempalte-columns:10% 200px auto 3fr 2fr

w=1000*10%+200px+内容本身宽度，如果没有内容，默认为0

剩下部分1=1000-w*3/5

剩下部分2=1000-w*2/5

grid-template-rows:1fr第一行的高度=1500-剩下行的自动撑开的高度和

一般设置为auto

grid-template-columns:列

grid-template-rows:行

grid-template取值示例;

grid使用场景的划分示例;

grid-template-columns 的auto为0的例子

.container{

display:grid;

grid-template-columns:1fr 1fr 1fr 1fr 1fr;

grid-template-rows:auto auto auto;

}

container{

display:grid;

grid-template-columns:40px  50px auto 50px 40px;

grid-template-rows:25% 100px auto;

}

行列，两端固定宽度，中间auto

网格布局的grid-template，使用空格分隔的多个值来定义网格的列和行：

grid-template-columns：100px auto 10% 1fr 2fr;网格有有5列，第一列宽度为100px，第二列为每个单元格内容的宽度，第三列为网格容器宽度的10%，第四列、第五列是总宽度减去一二三列的宽度后按1:2的比列分配的宽度

grid-template-rows：200px auto;网格有两行，第一行高度为200px，第二行高度为单元格内容的高度

若单元格数多于写的行数和列数，后面为定义的行的宽度为auto

grid-template-columns    有几个数值就分成多少列；

grid-template-rows    有几个数值就分成多少行；

auto在没有fr的情况下会自动撑开剩余空间，但如果有fr，auto则会显示出最小值（在没有宽度的情况下，auto默认为0，显示内容宽度）；简单说可以理解成优先于fr；

grid-template-columns和grid-template-rows

语法

grid-template-columns:<track-size>..| <line-name> <track-size> ...;

grid-template-rows:<track-size> | <inline-name> <track-size> ...;

参数说明

1：track-size(轨道大小)：可以使用css长度（px,em，rem等），百分比或用分数（用fr单位）

2：line-name（网格线的名字：可以选择任何名字

grid-template-columns / grid-template-rows，使用以空格分隔的多个值来定义网格的列和行。

高度确定auto就会平均分配。