今天介紹一個(gè)新的布局神器---Grid布局，也叫做柵格布局。

本文分為以下幾個(gè)部分：

• 給container定義grid屬性
• 如何畫柵格
• 如何往柵格里面添加內(nèi)容
• 網(wǎng)格排列

給container定義grid屬性

首先我們要給包含內(nèi)容的container設(shè)置grid屬性，這里有兩種屬性grid和inline-grid, inline-grid代表的是行內(nèi)grid。
設(shè)置方法如下所示：

    .container {
      display: grid/inline-grid;
      width: 300px;
      height: 300px;
      border:solid 2px  pink;
    }

如何畫柵格

當(dāng)我們?cè)O(shè)置好了容器屬性以后，第一步就是要想好怎么畫好格子。
這個(gè)就相當(dāng)于建筑圖紙里面的標(biāo)尺線，有了這個(gè)標(biāo)尺，才能更規(guī)范的放內(nèi)容。

我們通過(guò)設(shè)置行和列的長(zhǎng)度來(lái)控制格子的布局，具體有三種方法：
1.用具體px值設(shè)定每一行/寬的長(zhǎng)度

      grid-template-rows: 100px 100px 100px;
      grid-template-columns: 100px 100px 100px;

2.用百分比設(shè)定每一行/寬的長(zhǎng)度

      grid-template-rows: 30% 40% 30%;
      grid-template-columns: 100px 100px 100px;

3.用fr設(shè)定每一行/寬的長(zhǎng)度，這里的fr可以理解成當(dāng)前占得的份數(shù)

      grid-template-rows: 1fr 2fr 1fr;
      grid-template-columns: 100px 100px 100px;

如果出現(xiàn)重復(fù)，可以使用repeat()函數(shù)，將重復(fù)值簡(jiǎn)寫。

     grid-template-columns: 100px 100px 100px;
     //等價(jià)為
     grid-template-columns: repeat(3,100px);

如何往柵格里面添加內(nèi)容

格子畫好之后，第二步是要把內(nèi)容放進(jìn)去。
內(nèi)容放在哪個(gè)格子里，放幾個(gè)格子，都是我們要考慮的問(wèn)題。

目前有兩種方法，一個(gè)是行列定位法，一個(gè)是區(qū)域定位法。

1.行列定位法

行列定位發(fā)有三種實(shí)現(xiàn)方式。

• 設(shè)置行列編號(hào)
  在我們畫好格子以后，系統(tǒng)會(huì)對(duì)我們的邊進(jìn)行編號(hào)，如下圖所示。
  
  系統(tǒng)編號(hào)模式
  
  我們通過(guò)設(shè)置行/列的起始邊來(lái)進(jìn)行定位，比如我們要把內(nèi)容放在最中間的格子里，我們可以這樣設(shè)置：

      grid-row-start:  2;   //=> 中心塊行開始的編號(hào)為2號(hào)
      grid-row-end: 3;   //=> 中心塊行開始的編號(hào)為3號(hào)
      grid-column-start: 2;   //=> 中心塊行開始的編號(hào)為2號(hào)
      grid-column-end: 3;   //=> 中心塊行開始的編號(hào)為3號(hào)

• 自定義行列名稱
  當(dāng)格子很多的時(shí)候，用系統(tǒng)的編號(hào)可能會(huì)有點(diǎn)混亂，我們可以通過(guò)自定義行列的名稱來(lái)進(jìn)行定位，先在container里面設(shè)定行列的名稱：

    .container {
      display: grid;
      width: 300px;
      height: 300px;
      border:solid 2px  pink;
      grid-template-rows: repeat(3, [r-start] 1fr [r-end]);
      grid-template-columns:repeat(3, [c-start] 1fr [c-end]);
    }

設(shè)置完之后，行列的編號(hào)就從系統(tǒng)編號(hào)變成下面的樣子。

自定義名稱

同樣，如果我們要把內(nèi)容放在最中間的格子里，我們可以這樣設(shè)置：

      grid-row-start: r-start 2;   
      grid-row-end: r-end 2;
      grid-column-start: c-start 2;
      grid-column-end: c-end 2;

• span擴(kuò)張法
  span可以理解成在原有基礎(chǔ)上進(jìn)行擴(kuò)張。
  舉個(gè)例子，假設(shè)我們想讓內(nèi)容占據(jù)整個(gè)第一行，設(shè)置如下：

      grid-row-start: 1;   //=>開始的行數(shù)
      grid-row-end: 2;  //=>結(jié)束的行數(shù)
      grid-column-start: 1;   //=>開始的列數(shù)
      grid-column-end: span 3;  //=>在原有的開始列數(shù)后擴(kuò)張了三個(gè)單位

2.區(qū)域定位法

區(qū)域定位法類似于買地的行為，賣家(container)將不同區(qū)塊進(jìn)行命名，買家買下該名字的地就擁有它的使用權(quán)。

以下面一種常用的布局形式來(lái)舉例。

頁(yè)面分為四個(gè)區(qū)塊:
header:1號(hào)頭部信息欄
nav:2號(hào)側(cè)邊導(dǎo)航欄
content:3號(hào)內(nèi)容區(qū)域
footer4號(hào)底部信息欄

設(shè)置方法如下：

   //賣家起名字
    .container {
      display: grid;
      width: 300px;
      height: 450px;
      border:solid 2px  pink;
      grid-template-rows: 60px 1fr 60px;
      grid-template-columns: 60px 1fr;
      grid-template-areas: "header header"
      "nav main"
      "footer footer";
    }
    //買家購(gòu)買相應(yīng)的區(qū)域
     .header {
      grid-area: header;
    }
    .nav {
      grid-area: nav;
    }
    .main {
      grid-area: main;
    }
    .footer {
      grid-area: footer;
    } 

網(wǎng)格排列

當(dāng)網(wǎng)格的面積小于容器的面積的時(shí)候，為了界面的美觀，可以設(shè)置網(wǎng)格排列屬性。

• 水平排列：justify-content

.container {
  justify-content: left | right | center | space-between | space-around;
}

• 垂直排列：align-content

.container {
  align-content: baseline | end | center | space-between | space-around;
}