CSS grid网格布局，列数固定，宽度flex弹性

方法一：父元素css设置如下

.flex-grid{
display:grid;
grid-template-columns: auto auto auto auto auto auto;
}

此方法可实现一行固定排列六列，宽度随着屏幕大小弹性
缺点:当子元素item数量不足六列时，宽度并非1/6

方法2：父元素css设置如下

.flex-grid{
display:grid; 
grid-template-columns: 1fr  1fr  1fr  1fr  1fr  1fr;
}

优点：子元素数量不足六列时，宽度依然是父元素宽度的1/6

1fr 详解：fr 是分数单位，1fr是可用空间的 1 部分
当各列宽度单位设置都为fr时，则表示父元素宽度的平均划分成n份，一份宽度为1fr

当各列宽度单位中有设置为px时，如
grid-template-columns: 1fr 1fr 1fr 40px 1fr 1fr;

此时，1fr的宽度等于父元素宽度减去40px后的剩下宽度平均划分成五份的宽度