摘要：相信大家都比較熟悉布局了，最近有空研究了波布局，感覺雖然兼容性還不是太高，應(yīng)用不是太普遍，但是功能非常強(qiáng)大。未來(lái)應(yīng)該是為主流，是二維布局，很靈活，適合整體構(gòu)架，而是一維布局，適合處理局部細(xì)節(jié)。介紹介紹網(wǎng)格布局是中最強(qiáng)大的布局系統(tǒng)。

相信大家都比較熟悉flex布局了，最近有空研究了波grid布局，感覺雖然兼容性還不是太高，應(yīng)用不是太普遍，但是功能非常強(qiáng)大。未來(lái)應(yīng)該是grid+flex為主流，grid是二維布局，很靈活，適合整體構(gòu)架，而flex是一維布局，適合處理局部細(xì)節(jié)。

介紹

• CSS 網(wǎng)格布局(Grid Layout) 是CSS中最強(qiáng)大的布局系統(tǒng)。 這是一個(gè)二維系統(tǒng)，這意味著它可以同時(shí)處理列和行，不像 flexbox 那樣主要是一維系統(tǒng)。

• 兼容性目前不是太友好
  

• 和felx類似，grid有容器和項(xiàng)目
  • Grid容器 屬性列表
    • Grid Container 的全部屬性
    • display
    • grid-template-columns
    • grid-template-rows
    • grid-template-areas
    • grid-template
    • grid-column-gap
    • grid-row-gap
    • grid-gap
    • justify-items
    • align-items
    • justify-content
    • align-content
    • grid-auto-columns
    • grid-auto-rows
    • grid-auto-flow
    • grid
  • Grid項(xiàng)目 的全部屬性
    • grid-column-start
    • grid-column-end
    • grid-row-start
    • grid-row-end
    • grid-column
    • grid-row
    • grid-area
    • justify-self
    • align-self
• 被嚇到了嗎，反正第一次我看是被嚇到了，不過(guò)沒(méi)事，下面只會(huì)講解其中常用的
• 下面栗子均用.grid_box，.grid_item分別指代容器和項(xiàng)目，并使用以下html結(jié)構(gòu)

  

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
    
11
  
  鄰居元素

容器屬性

display

• grid - 生成一個(gè)塊級(jí)(block-level)網(wǎng)格
• inline-grid - 生成一個(gè)行級(jí)(inline-level)網(wǎng)格
• subgrid - 如果容器本身就是一個(gè)項(xiàng)目，就可以使用這個(gè)屬性來(lái)表示你想從它的父節(jié)點(diǎn)獲取它的行/列的大小，而不是指定它自己的大小。

    .grid_box {
      background: #054154;
      display: inline-grid;    //行級(jí)網(wǎng)絡(luò)，和span處于一行
    }

    .grid_item {
      background: #0490db;
      border: 1px solid #fff;
    }

    .grid_box {
      background: #054154;
      display: grid;    //塊級(jí)網(wǎng)絡(luò)，將span擠入下一行
    }

    .grid_item {
      background: #0490db;
      border: 1px solid #fff;
    }

grid-template-columns / grid-template-rows

• grid-template-rows是行高

    .grid_box {
      background: #054154;
      width: 500px;
      height: 300px;
      display: grid;
      grid-template-rows: 60px auto 40px;
    }

    .grid_item {
      background: #0490db;
      border: 1px solid #fff;
    }

代表第一行高60px，第三行高40px,其他的所有行（不設(shè)置或者auto的行）平分剩余高度

• grid-template-columns是列寬

    .grid_box {
      background: #054154;
      width: 500px;
      height: 300px;
      display: grid;
      grid-template-rows: 60px auto 40px;
      grid-template-columns: 30px 20px auto auto;
    }

    .grid_item {
      background: #0490db;
      border: 1px solid #fff;
    }

和行高類似，這個(gè)代表第一列寬30px,第二列寬20px，第三列第四列平分剩余寬度（和行高不同的是列寬是你設(shè)置了多少就會(huì)有多少列，列數(shù)量和你設(shè)置的是相同的）

grid-gap

• 【grid-gap】默認(rèn)值為0，兩個(gè)屬性的縮寫，第一個(gè)grid-row-gap（行與行之間的間距），第二個(gè)grid-column-gap（列與列之間的間距）,只設(shè)置了一個(gè)值，表示行和列的間距相等*/

    .grid_box {
      background: #054154;
      width: 500px;
      height: 300px;
      display: grid;
      grid-template-rows: 60px auto 40px;
      grid-template-columns: 30px 20px repeat(2,1fr);
      grid-gap: 2px 4px;   //行間距2px,列間距4px
    }

    .grid_item {
      background: #0490db;
      border: 1px solid #fff;
    }

一些語(yǔ)法糖

repeat

• 你可能會(huì)問(wèn)如果中間有很多列/行，每個(gè)都寫豈不是很麻煩，因此提供了repeat語(yǔ)法糖來(lái)簡(jiǎn)化寫法

.grid_box {
    grid-template-columns: 30px 20px auto auto;
    grid-template-columns: 30px 20px repeat(2,auto);//等價(jià)于
}

fr

• 另外，類似flex的1，grid里面也有類似的份數(shù)單位---fr.

.grid_box {
    grid-template-columns: 30px 20px auto auto;
    grid-template-columns: 30px 20px 1fr 1fr;//等價(jià)于
    grid-template-columns: 30px 20px repeat(2,1fr);//也等價(jià)于
}

minmax

• 最大值最小值
  grid-template-rows: minmax(auto, 30%) 1fr 1fr;表示第一行高最小auto,最大30%

項(xiàng)目屬性

grid-area

• 單體操作，控制個(gè)體的位置，凌駕于整體規(guī)則，4個(gè)屬性分別是 grid-row-start（開始行線）， grid-column-start（開始列線）， grid-row-end（結(jié)束行線），grid-column-end（結(jié)束列線）
• 比如下面用item3來(lái)多帶帶操作

    .grid_box {
      background: #054154;
      width: 500px;
      height: 300px;
      display: grid;
      grid-template-rows: 60px auto 40px;
      grid-template-columns: 30px 20px repeat(2,1fr);
      grid-gap: 2px 4px;
    }

    .grid_item {
      background: #0490db;
      border: 1px solid #fff;
    }
    #item3{
      grid-area: 1 /1/ 2/ 4;
    }

grid-area: 1 /1/ 2/ 4;代表item3的位置是，行線1到2，列線1到4，這四條線組成的區(qū)域即是item3的位置，是不是很強(qiáng)大，太叼了這個(gè)

span,負(fù)數(shù)

• 你可能會(huì)問(wèn)如果中間有很多列/行，那還要去數(shù)是第幾列線豈不是很麻煩，因此又有了優(yōu)化
• 和js里的slice類似，負(fù)數(shù)表示倒數(shù)
• 而span表示合并
• 因此本例中，以下都是等價(jià)的

    #item3{
      grid-area: 1 /1/ 2/ 4; 
      grid-area: 1 /1/ 2/ span 3;//等價(jià)
      grid-area: 1 /1/ 2/ -2;//等價(jià)
    }

order

• 如果有兩個(gè)子項(xiàng)目發(fā)生了重疊怎么辦呢，就需要order來(lái)解決層級(jí)問(wèn)題了。
• 和index類似于z-index，表明疊放順序，數(shù)值越大，越在上。允許負(fù)數(shù)。

    .grid_box {
      background: #054154;
      width: 500px;
      height: 300px;
      display: grid;
      grid-template-rows: 60px auto 40px;
      grid-template-columns: 30px 20px repeat(2,1fr);
      grid-gap: 2px 4px;
    }

    .grid_item {
      background: #0490db;
      border: 1px solid #fff;
    }
    #item3{
      grid-area: 1 /1/ 2/ 4;
      order: 1;
    }
    #item4{
      grid-area: 1 /1/ 2/ 4;
    }

因?yàn)閕tem3有order,所以item3蓋住了item4

命名

• 在我看來(lái)，命名是grid最強(qiáng)大的地方，你可以在容器里面設(shè)置命名，然后在子項(xiàng)目里面使用該命名
• 其中點(diǎn)號(hào) . 代表一個(gè)空網(wǎng)格單元
• 比如我們來(lái)個(gè)常規(guī)的布局

  

    
header
    
aside
    
content
    
footer
  
  鄰居元素

    .grid_box {
      background: #054154;
      width: 500px;
      height: 300px;
      display: grid;
      grid-template-rows: 60px auto 40px;
      grid-template-columns: 30px 20px repeat(2,1fr);
      grid-gap: 2px 4px;
      grid-template-areas: "header header header header" "aside . content content" "footer footer footer footer";
    }

    .grid_item {
      background: #0490db;
      border: 1px solid #fff;
    }
    #header{
      grid-area: header;
    }
    #aside{
      grid-area: aside;
    }
    #content{
      grid-area: content;
    }
    #footer{
      grid-area: footer;
    }

是不是很強(qiáng)大

• 另外，網(wǎng)絡(luò)線也是可以命名的

  測(cè)試

• 以上就是一些常用的，基礎(chǔ)的使用方法，更深入的我們以后再來(lái)討論
• 如果你想檢測(cè)自己是否基本掌握了grid，可以使用以下的網(wǎng)址測(cè)試，是個(gè)有趣的小游戲

• 小測(cè)試

最后

大家好，這里是「 TaoLand 」，這個(gè)博客主要用于記錄一個(gè)菜鳥程序猿的Growth之路。這也是自己第一次做博客，希望和大家多多交流，一起成長(zhǎng)！文章將會(huì)在下列地址同步更新……
個(gè)人博客：www.yangyuetao.cn
小程序：TaoLand