1.作用在父容器上的屬性
（1） display : grid
（2）grid-template-columns : 設定列數
（3）grid-template-rows : 設定行數
這樣重複設定同樣的值會比較麻煩，這時候我們可以使用repeat(）值和fr單位。fr是比例單位,等分可用空間。將上面**換一下，看看效果：
#box（4）grid-template-areas : 劃分區域的（區域必須是矩形區域）
例如：
#box
#box div:nth-of-type(1)
#box div:nth-of-type(2)
#box div:nth-of-type(3)
#box div:nth-of-type(4)
#box div:nth-of-type(5)
#box div:nth-of-type(6)
#box div:nth-of-type(7)
#box div:nth-of-type(8)
#box div:nth-of-type(9)
123
4567
89
（5） grid-column-gap : 列的間距
（6） grid-row-gap : 行的間距
例如：
#box
#box div:nth-of-type(1)
#box div:nth-of-type(2)
#box div:nth-of-type(3)
#box div:nth-of-type(4)
#box div:nth-of-type(5)
#box div:nth-of-type(6)
#box div:nth-of-type(7)
#box div:nth-of-type(8)
#box div:nth-of-type(9)
（7）justify-items : 子項的水平居中方式
選項： 預設 : stretch 預設值，拉伸。表現為水平或垂直填充。 start， center，end
（8）align-items : 子項的垂直居中方式
選項： 預設 : stretch 預設值，拉伸。表現為水平或垂直填充。 start， center，end
（9） justify-content : 整體網格的水平對齊方式
選項：預設：stretch， start， end， center， space-between， space-around（子項之間的空間是邊距的二倍），space-evenly（平分空間）
（10） align-content : 整體網格的垂直對齊方式
選項：預設：stretch， start， end， center， space-between， space-around（子項之間的空間是邊距的二倍），space-evenly（平分空間）
2、作用在子項上的
grid-area : 找指定的區域
grid-column-start 水平方向上佔據的起始位置
grid-column-end 水平方向上佔據的結束位置
grid-row-start 垂直方向上佔據的起始位置
grid-row-end 垂直方向上佔據的結束位置
每個網格的行和列都有預設的排序
例：
#box
#box div
123
現在使box下的div從列的第三條邊開始，列的第四條邊結束，
#box
#box div
《逆戰班》
Grid網格布局入門筆記
指定乙個容器採用網格布局，在父元素中定義grid屬性 display grid 塊級元素布局 或display inline grid 行內元素 在容器中新增了網格布局後，就要劃分行和列，columns 列 row 行 grid template columns 定義每一列的寬度 grid temp...
Grid網格布局
前言 就目前為止，css的grid和flexbox結合將是解決布局的最佳方案。雖然瀏覽器對css grid和flexbox的屬性未完全支援，但對於實現布局而言，這已是一種非常完美的結合。如果css box alignment module level3能得到更好的支援的話，那麼對於web的布局將是一...
Grid網格布局
flex 布局是軸線布局，只能指定 專案 針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成 行 和 列 產生單元格，然後指定 專案所在 的單元格，可以看作是二維布局。grid 布局遠比 flex 布局強大。可以使用repeat repeat 3,33.33 定義三列，每一列為33....