grid-layout 網格布局--快速上手

grid布局非常強大，他是二維布局模式，將容器划分成“行”和“列”，產生單元格，然后指定項目所在單元格，，而flex是一維布局，grid遠比flex強大的多。

這里我只講日常工作中常用的屬性。

1、容器上的屬性

（1）display屬性

display：grid  用來指定容器為網格布局。這跟我們以前寫 display：block； display：flex；都是一個意思，就是告訴瀏覽器我當前的這個盒子使用的布局方式，這樣瀏覽器才能識別你接下倆設置的屬性。

div {
  display: grid;
}

// 指定一個元素是行內塊網格布局
div {
  display: inline-grid;
}

這里需要注意的是：設為網格布局以后，容器子元素的float、display：inline-block、display：table-cell、vertical-align和column-*等設置都將失效。

（2）grid-template-columns屬性和grid-template-rows屬性

容器指定了網格布局之后，接着就可以划分行和列了，grid-template-columns用來指定每一列的寬度，grid-template-rows用來指定每一行的高度。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

上面三種寫法都是指定了一個三行三列的網格，第一種是固定寬高，第二第三種是寬高都占總的三分之一。

在設置這兩個屬性時，我們時常會用到一些關鍵字：repeat、fr、minmax

repeat：repeat()接受兩個參數，第一個參數是重復的次數（上例是3），第二個參數是所要重復的值。

grid-template-columns: repeat(2, 100px 20px 80px);

fr：為了方便表示比例關系，網格布局提供了fr關鍵字（fraction 的縮寫，意為"片段"）。如果兩列的寬度分別為1fr和2fr，就表示后者是前者的兩倍

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

fr可以與絕對長度的單位結合使用，這時會非常方便。

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

上面代碼表示，第一列的寬度為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 {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

• - start：對齊單元格的起始邊緣。
• - end：對齊單元格的結束邊緣。
• - center：單元格內部居中。
• - stretch：拉伸，占滿單元格的整個寬度（默認值）

place-items屬性是align-items屬性和justify-items屬性的合並簡寫形式。

place-items: <align-items> <justify-items>;

2、容器的屬性

(1)justify-self 屬性，align-self 屬性，place-self 屬性

justify-self屬性設置單元格內容的水平位置（左中右），跟justify-items屬性的用法完全一致，但只作用於單個項目。

align-self屬性設置單元格內容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是只作用於單個項目。

3、布局實例

（1）用grid實現兩欄布局

// html部分

　　<div class="container">

　　　　<div class="left"></div>

　　　　<div class="main"></div>

　　</div>

// css部分
.container{
  display: grid;
  grid-template-columns: 200px 1fr;
}

這樣，我們只需一行代碼就搞定了兩欄布局。

（2）實現水平垂直居中

// html部分
<div class="container">
      <div class="item"></div>
</div>

// css部分
.container{
  display: grid;
  justify-items: center;
  align-items: center;
}

（3）實現十二網格布局

grid-template-columns: repeat(12, 1fr);