(1)首先:區分容器和項目的概念
容器都需要：
display:grid
(2)行|列的兩種賦值方法：
直接賦值和repeat方法，以列寬舉例
a.直接賦值：
grid-template-columns: 70% 30%;
b.repeat方法：
grid-template-columns: repeat(12, 1fr);
(3)列寬行高
grid-templete-columns--列寬
grid-templete-rows--行高
一般可以不設置行高
(4)fr比例的問題
grid-template-columns: 1fr 2fr 3fr;
(5)auto實現雙飛翼
grid-template-columns: 100px auto 100px;
(6)行列之間的間隙
grid-gap: grid-row-gap grid-column-gap
grid-gap:20px 20px;
(7)先行後列還是先列後行~
grid-auto-flow:row(默認)|column
(8)單元格內容的水平位置：
justify-items: start | end | center | stretch; //這一點和flex的justify-content區分一下
align-items: start | end | center | stretch;
(9)整個內容區域在容器中的位置：
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
裏邊幾個很有意思的屬性,針對項目：
space-around - 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與容器邊框的間隔大一倍。
space-between - 項目與項目的間隔相等，項目與容器邊框之間沒有間隔。
space-evenly - 項目與項目的間隔相等，項目與容器邊框之間也是同樣長度的間隔。