之前一直用flex布局，第一次采用grid布局完成一个页面，兼容IE 10+ Chrome Firefox最新版本，在此总结下。
what Grid
CSS一直用来布局网页，但一直都不完美。 一开始我们使用table 做布局，然后转向浮动、定位以及inline-block，但所有这些方法本质上都是 Hack 的方式。
浏览器支持情况
术语
- Grid Container
设置了 display: gird 的元素
- Grid Item
Grid 容器的孩子（直接子元素）
- Grid Line
它们既可以是垂直的（“column grid lines”），也可以是水平的（“row grid lines”）
- Grid Cell
它是网格的一个“单元”
- Grid Area
网格区域可以由任意数量的网格单元组成
- Grid Track
你可以把它们想象成网格的列或行
父容器属性
- display : grid / inline-grid /subgrid
