【1】「2021」前端总结CSS之Grid篇（三）

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; }

参考链接：

css-tricks.com/snippets/cs…

www.ruanyifeng.com/blog/2019/0…