《CSS in depth》第六章
grid布局：
关于网格容器和网格元素：网格容器上使用display:grid; 启用网格布局。然后通过grid-template-columns和grid-template-rows来定义每行和每列的元素大小信息。grid-gap定义各个元素之间的间隔。大小信息可以用fr单位（fraction unit）或者px/em/百分比。不同单位可以混搭，比如300px 1fr; 表示第一个元素占300px, 第二个元素占据剩余大小。
关于网格布局的其他概念：
网格线（grid line）: 就是grid-gap所在的线。
网格轨道（grid track）:两条相邻网格线中间的空间。行和列。
网格单元（grid cell）:顾名思义。
网格区域（grid area）: 网格上的矩形区域，由一到多个cell构成。
grid-column 和grid-row属性中的数字，是网格线编号，从1开始。这两个属性作用于网格元素，实际是gird-column/row-start/end的简写。
gird布局和flex布局的区别：
flexbox本质是一维的，而grid是二维的。
