1、Grid布局与Flex 布局的区别：
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
2、grid-template-columns 和 grid-template-rows
.container { display: grid | inline-grid; }
// grid - 生成块级网格
// 内联网格 - 生成内联级网格
.container {
grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}
<track-size> - 可以是网格中可用空间的长度，百分比或分数（使用fr单位）
<line-name> - 您选择的任意名称
如果您的定义包含重复部分，则可以使用该repeat()表示法来简化事物：
.container { grid-template-columns: repeat(3, 20px [col-start]); }
这相当于：
.container { grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start]; }
该fr单元允许您将轨道的大小设置为网格容器的可用空间的一部分。例如，这会将每个项目设置为网格容器宽度的三分之一：
.container { grid-template-columns: 1fr 1fr 1fr; }
参考链接：
