www.w3schools.com/css/css_gri…
概念
通过display: grid或display: inline-grid来实现一个grid container
所有grid container的直接孩子都会变成grid item
grid item组成的列叫做grid column，grid item组成的行叫做grid row，grid item之间的空隙叫grid gap（具体还有row gap和column gap之分，可以单独控制）
grid Lines是所有包裹在grid item四周的线，也具体分为column lines和row lines。通过指定一个grid item应该在哪两个grid line之间，可以指定这个grid item的长或宽
grid container
对grid container首先就需要通过grid-template-columns定义grid有几列和列宽，比如可以通过grid-template-columns: auto auto auto auto来指定等宽的4列
还可以使用grid-tamplate-rows来控制grid的行高，比如可以通过grid-template-rows: 80px 200px来指定第一行行高80px，第二行行高200px
justify-content：用于给grid items水平排版，比如可以设置成start让所有grid item全部靠左
align-content：用于给grid items纵向排版
grid items
通过grid-column-start和grid-column-end（或简写成grid-column）来指定grid item的所占列数
，以实现不同宽度。比如可以grid-column: 1 / 5来指定grid item横跨grid column line 1到5之间
，或者可以grid-column: 2 / span 3实现从2线开始跨3个列。类似也可以通过grid-row实现行的控制。
另外，还可以通过grid-area: 1 / 2 / 5 / 6来指定一个方形区域，意为从row-line1和column2开始，在row-line5和column-line6结束。通过这个功能，可以指定任意grid item在grid网格中的位置
grid-area还可以给grid item取名，命名后可以在grid-template-areas属性中使用。比如通过item命名，可以实现www.w3schools.com/css/tryit.a…
