网格布局

定义

以我们常用的Flex来作为对比说明。Flex是轴线布局，只能指定“项目”针对轴线的位置，可将其理解为一维布局。而Grid布局则是将容器划分为“行”和“列”，从而在交叉之后产生单元格，然后指定“项目”所在的单元格，可以看作是二维布局。Grid布局比Flex更强大。

基本概念

容器属性

1. grid-template-columns（设置列数及列宽，可为具体数值，如100px；或X等分，如2fr；或auto）
2. grid-template-rows（设置行数及行高，可为具体数值，如100px；或X等分，如3fr；或auto）
3. grid-row-gap（行间距）
4. grid-column-gap（列间距）
5. grid-gap(3和4的简写，同时设置行间距和列间距)
6. grid-template-areas（划分网格区域，值可设置为字符串，如'a b c'、'r . r'，为.时不计入区域）
7. grid-auto-flow（布局方向，类似flex布局的flex-direction. 值为dense的时候会自动填充满每行或每列）
8. justify-items（容器内所有项目水平对齐方式）
9. align-items（容器内所有项目垂直对齐方式）
10. place-items(8和9的简写)
11. justify-content(容器内容水平对齐方式)
12. align-content（容器内容垂直对齐方式）
13. place-content(11和12的简写)
14. grid-auto-columns(超出所设置列数的项目宽度)
15. grid-auto-rows(超出所设置行数的项目高度)

项目属性

1. grid-column-start（指定item的开始位置，值为第几根横向网格线）
2. grid-column-end（指定item的结束位置，值为第几根横向网格线）
3. grid-column（1和2的简写形式，项目合并哪几列; 如1 / 3 表示item合并第一列和第二列；）
4. grid-row-start（同1，纵向网格线）
5. grid-row-end（同2，纵向网格线）
6. grid-row（3和4的简写形式，项目合并哪几行）
7. grid-area（指定项目属于容器的哪个区域）
8. justify-self（设置单元格内容的水平位置，与justify-items属性的用法完全一致）
9. align-self（设置单元格内容的垂直位置，与align-items属性的用法完全一致）
10. place-self（8和9的简写形式）