grid布局是乙個二維的布局方法，縱橫兩個方向總是同時存在，同時它的屬性也分為作用在grid子項和grid容器上。
上面這圖就是網格布局中作用於容器上的屬性。
grid-template-columns和grid-template-rows？
這是對網格進行橫縱劃分，形成二維布局。單位可以是畫素，百分比，自適應以及fr單位（網格剩餘空間比例單位）。
grid-template-areas和grid-template？
area是區域的意思，grid-template-areas就是給我們的網格劃分區域的。此時grid子項只要使用grid-area屬性指定其隸屬於那個區。
grid-template是grid-template-rows，grid-template-columns和grid-template-areas屬性的縮寫。
grid-column-gap和grid-row-gap？
grid-column-gap和grid-row-gap屬性用來定義網格中網格間隙的尺寸。
css中grid-gap屬性是grid-column-gap和grid-row-gap屬性的縮寫。
justify-items和align-items？
justify-items指定了網格元素的水平呈現方式，是水平拉伸顯示，還是左中右對齊。
align-items指定了網格元素的垂直呈現方式，是垂直拉伸顯示，還是上中下對齊。
place-items是可以讓align-items和justify-items屬性寫在單個宣告中。
justify-items和align-items的取值如圖：
justify-content和align-content？
justify-content指定了網格元素的水平分布方式。
align-content指定了網格元素的垂直分布方式。
place-content可以讓align-content和justify-content屬性寫在乙個css宣告中。
justify-content和align-content的取值範圍如圖：
作用於grid子項上的屬性如圖：
作用於grid子項上的取值含義如圖：
這次主要說了grid網格布局的一些取值範圍以及含義。
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...