grid布局在国外已经发展了很长一段时间，并且已经有很多使用它的成熟案例了，但是在国内，grid显然还没有得到重用。 本章写一写它的一些基本概念，也帮自己理解一下，以备不时之需，应该也可以说是必然吧。
1. 基本概念
1.1 容器及其属性
也就是定义了display: grid的最外层盒子，对标flex。 先看下容器的属性
grid-template-columns
期望多少列，不写自动分配
grid-template-columns:20px 50px 100px; //显示为三列每列宽度顺序
// fr类似于flex 子item中的flex权重属性
grid-template-columns:repeat(4, 1fr); //显示为4列，一样宽度
grid-template-columns: 1fr 2fr 3fr; //显示为3列，1/6,2/6,3/6宽度
// minmax能决定最大值和最小值
grid-template-columns: 1fr minmax(150px，1fr); //显示为2列，第二列最大1/2，最小150px
grid-template-columns: 100px auto 200px; //第二列自动填充剩下宽度
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4]; // 定义列名字
grid-template-rows
期望多少行，不写自动分配
grid-template-rows: repeat(4, 200px); //显示为四行每行高度200px
grid-template-rows: repeat(auto-fill, 200px); //同上，但是当容器大小不合适时，item自动适应个数
gap
是row-gap，column-gap 的缩写，定义item之前的距离
gap: 20px 40px; // row-gap 20px; column-gap:40px
grid-template-areas
最直观的定义，单元数和单元格的定义，判断优先级高于grid-template-rows/columns，建议不要混用，否则会非常混乱。
grid-template-areas: 'a b c'
'd g l';
// 2*3
grid-template-areas: 'a a a'
'b b b';
// 配合子item名字进行使用，可以改变排序
grid-auto-flow
类似于flex-direction，确定item排序方向
grid-auto-flow: row //默认，可选column，row dense
// row dense，表示把换行上空缺的元素由下一个可放置的元素补上
place-items, justify-items, align-items
对标flex的对应属性和属性值，表示item在cell内的位置, place-items是后面两个的缩写
place-content, justify-content,align-content
表示整个表格在容器中的位置，属性值与上相同
grid-auto-columns, grid-auto-rows
表示多出来的项目的宽高，如不设置，按照项目的本身最大宽高来计算
1.2 项目（item）及其属性
也就是容器下的子盒子
grid-column，grid-column-start, grid-column-end
grid-column即后两者缩写，定义这个item所占据的列网格线
grid-column:1/3;
grid-column:1/span 2:span表示跨越指定的数量
// 表示占据第一二列
grid-row，grid-row-start, grid-row-end
grid-row即后两者缩写，定义这个item所占据的行网格线
grid-row:1/3;
// 表示占据第一二行
grid-area
有两种功能或者说使用方法
- 即上两者的合并缩写
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end
- 配合容器的grid-template-areas属性使用
place-self, justify-self, align-self
同容器的pkace-items，但是只作用于自己这个单元格
order
相当于grid中的专用z-index
2. grid和flex的区别
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。从功能上看，Grid 布局远比 Flex 布局强大。
3. 小结
总的来说，看下来并且实践之后，grid的功能和效果确实很强大，但是，由于属性过多且属性值也比较复杂，并且存在部分属性相互之间覆盖和重复的问题，并且这种覆盖关系官方没有给到明确的优先级，加上不一定能配合其他布局结合使用，所以学习和使用的成本偏高。个人感觉而言，各个属性单领出来都是挺完美的，但是组合起来有点别扭，入门还是比较困难的，也就是说，在没有去多多实践之前，是感受不到它的便捷和问题的，看文章或者搬运帮助不了太多。
