將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局
grid 布局與 flex 布局有一定的相似性，都可以指定容器內部多個專案的位置。但是，它們也存在重大區別。
flex 布局是軸線布局，只能指定"專案"針對軸線的位置，可以看作是一維布局。
grid 布局則是將容器劃分成"行"和"列"，產生單元格，然後指定"專案所在"的單元格，可以看作是二維布局。
容器裡面的水平區域稱為"行"，垂直區域稱為"列"。
規劃子元素排列的順序。值含義
row先行後列，預設值
column
先列後行
設定列數，行數。
介紹幾種常用的方法：
網格線名稱
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
父元素
子元素1
子元素2
子元素3
grid-template-row、grid-template-column、grid-template-area的復合寫法。
grid-template：
「西瓜 西瓜 香蕉」 1fr
「蘋果 蘋果 香蕉」 1fr
「蘋果 蘋果 香蕉」 1fr
/1fr 1fr 1fr；
grid-gap是復合寫法，第乙個值是行間距，第二行是列間距。
justify-items 所有子元素在其區域內的水平對齊方式。值含義
strench
預設值，拉伸
start
左對齊center
居中對齊
end右對齊
align-items 所有子元素在其區域內的豎直對齊方式。值含義
strench
預設值，拉伸
start
上對齊center
居中對齊
end下對齊
place-items justfy-items和align-items的復合寫法，第乙個值是align-items，第二個值是justify-items。
justify-content 網格的水平對齊方式值含義
start
左對齊center
居中對齊
end右對齊
space-between
兩端對齊
space-around
環繞對齊
space-evenly
均分對齊
align-content 網格的豎直對齊方式值含義
start
上對齊center
居中對齊
end下對齊
space-between
兩端對齊
space-around
環繞對齊
space-evenly
均分對齊
place-content 符合寫法，第乙個值是align-content，第二個是justify-content。
為子元素指定區域，有名字和位置兩種寫法。
grid-area：row-start/colomn-start/row-end/column-end；grid-column-start：2；
grid-column-end：3；
grid-row-start：2；
grid-row-end：3；
grid-row：1 / span 2；
grid-column：3 / 4；
strench
預設值，拉伸
start
左對齊center
居中對齊
end右對齊
align-self 單個元素水平對齊方式。值含義
strench
預設值，拉伸
start
上對齊center
居中對齊
end下對齊
place-self 復合寫法，第乙個值是align-self，第二個是justify-self。
Grid網格布局
前言 就目前為止，css的grid和flexbox結合將是解決布局的最佳方案。雖然瀏覽器對css grid和flexbox的屬性未完全支援，但對於實現布局而言，這已是一種非常完美的結合。如果css box alignment module level3能得到更好的支援的話，那麼對於web的布局將是一...
Grid網格布局
flex 布局是軸線布局，只能指定 專案 針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成 行 和 列 產生單元格，然後指定 專案所在 的單元格，可以看作是二維布局。grid 布局遠比 flex 布局強大。可以使用repeat repeat 3,33.33 定義三列，每一列為33....
grid網格布局
1.1 容器和專案 採用網格布局的區域，稱為 容器 container 容器內部採用網格定位的子元素，稱為 專案 item 1.2 行和列 容器裡面的水平區域稱為 行 row 垂直區域稱為 列 column 1.3 單元格 行和列的交叉區域，稱為 單元格 cell 正常情況下，n行和m列會產生n x...