grid布局非常強大，他是二維布局模式，將容器劃分成「行」和「列」，產生單元格，然後指定專案所在單元格，，而flex是一維布局，grid遠比flex強大的多。
這裡我只講日常工作中常用的屬性。
1、容器上的屬性
（1）display屬性
display：grid 用來指定容器為網格布局。這跟我們以前寫 display：block； display：flex；都是乙個意思，就是告訴瀏覽器我當前的這個盒子使用的布局方式，這樣瀏覽器才能識別你接下倆設定的屬性。
div//指定乙個元素是行內塊網格布局
div
這裡需要注意的是：設為網格布局以後，容器子元素的float、display：inline-block、display：table-cell、vertical-align和column-*等設定都將失效。
（2）grid-template-columns屬性和grid-template-rows屬性
容器指定了網格布局之後，接著就可以劃分行和列了，grid-template-columns用來指定每一列的寬度，grid-template-rows用來指定每一行的高度。
.container.container
.container
上面三種寫法都是指定了乙個三行三列的網格，第一種是固定寬高，第二第三種是寬高都佔總的三分之一。
在設定這兩個屬性時，我們時常會用到一些關鍵字：repeat、fr、minmax
repeat：repeat()接受兩個引數，第乙個引數是重複的次數（上例是3），第二個引數是所要重複的值。
grid-template-columns: repeat(2, 100px 20px 80px);
fr：為了方便表示比例關係，網格布局提供了fr關鍵字（fraction 的縮寫，意為"片段"）。如果兩列的寬度分別為1fr和2fr，就表示後者是前者的兩倍
.container
fr可以與絕對長度的單位結合使用，這時會非常方便。
.container
上面**表示，第一列的寬度為150畫素，第二列的寬度是第三列的一半。
minmax()：
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
上面**中，minmax(100px, 1fr)表示列寬不小於100px，不大於1fr。
(3)grid-auto-flow 屬性
這個順序由grid-auto-flow屬性決定，預設值是row，即"先行後列"。也可以將它設成column，變成"先列後行"。
(4)justify-items 屬性，align-items 屬性，place-items 屬性
justify-items屬性設定單元格內容的水平位置（左中右），align-items屬性設定單元格內容的垂直位置（上中下）。
.container
place-items屬性是align-items屬性和justify-items屬性的合併簡寫形式。
place-items: ;
2、容器的屬性
(1)justify-self 屬性，align-self 屬性，place-self 屬性
justify-self屬性設定單元格內容的水平位置（左中右），跟justify-items屬性的用法完全一致，但只作用於單個專案。
align-self屬性設定單元格內容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是只作用於單個專案。
3、布局例項
（1）用grid實現兩欄布局
// html部分
// css部分
.container
這樣，我們只需一行**就搞定了兩欄布局。
（2）實現水平垂直居中
//html部分
class="
container
">
class="
item
">
//css部分
.container
（3）實現十二網格布局
grid-template-columns: repeat(12, 1fr);
Gridlayout 網格布局
css grid layout擅長將頁面劃分為主要區域，或者在從html基元構建的控制項的各個部分之間定義大小，位置和圖層之間的關係。與 一樣，網格布局使作者能夠將元素對齊到列和行中。但是，css網格可能比使用 更多或更容易布局。例如，網格容器的子元素可以自己定位，使它們實際重疊和分層，類似於css...
CSS3 grid layout（網格布局）（三）
讓我們接著來看網格布局 網格軌道可以使用任何長度單位進行定義。網格還引入了乙個另外乙個長度單位來幫助我們建立靈活的網格軌道，那就是fr。fr代表網格容器中可用空間的一等份，並且受其影響的網格軌道會隨著可用空間的變化增長或者收縮。fr的數量表示在行或列中可容納的網格軌道的數量，而fr值的大小則決定了網...
CSS3 grid layout（網格布局）（四）
讓我們接著來看網格布局 與其他長度單位混合所產生的頁面效果 下面先放上例子 如下 height 100 display grid grid template columns 1fr 200px 定義乙個寬為1fr的列軌道和乙個寬為200px的列軌道 div1 div2 two效果如圖 我們可以看到，...