区别Flex

• 目前兼容性还不够好，但是功能远超flex布局，未来两三年会普及
• flex布局比较擅长要么横着排要么竖着排
• 也分container与items

核心思想

• 通过设置container属性相当于先画出整个布局块状图
• 再由items属性去具体分配每个格子如何组合，例如：div.a可以是第一个格子也可以是几个格子的组合。

Container属性

grid-template-columns
grid-template-rows
grid-template-areas 用于指明区域，而不再需要grid-column-start/end这类属性的配合了
grid-gap, grid-column-gap, grid-row-gap, 平均布局时会用到

Items属性

grid-column-start
grid-columnm-end
grid-row-start
grid-row-end
grid-area

fr单位

如果两个元素分别被设置为1fr和3fr，那么空间就会被平均分配为4份；第一个元素占据1/4，第二个元素占据3/4

示例

代码示例1
代码示例2-用fr制作平均布局
代码示例3-grid-template-areas
代码示例4-实现下图的淘宝首页布局