CSS Grid布局入門

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

介紹

• CSS 網格布局(Grid Layout) 是CSS中最強大的布局系統。 這是一個二維繫統，這意味著它可以同時處理列和行，不像 flexbox 那樣主要是一維繫統。

• 相容性目前不是太友好
  

• 和felx類似，grid有容器和項目
  • 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項目 的全部屬性
    • grid-column-start
    • grid-column-end
    • grid-row-start
    • grid-row-end
    • grid-column
    • grid-row
    • grid-area
    • justify-self
    • align-self
• 被嚇到了嗎，反正第一次我看是被嚇到了，不過沒事，下面只會講解其中常用的
• 下面栗子均用.grid_box，.grid_item分別指代容器和項目，並使用以下html結構

  <div class="grid_box">    <div class="grid_item">1</div>    <div class="grid_item">2</div>    <div class="grid_item" id="item3">3</div>    <div class="grid_item" id="item4">4</div>    <div class="grid_item">5</div>    <div class="grid_item">6</div>    <div class="grid_item">7</div>    <div class="grid_item">8</div>    <div class="grid_item">9</div>    <div class="grid_item">10</div>    <div class="grid_item">11</div>  </div>  <span>鄰居元素</span>

容器屬性display

• grid - 產生一個塊級(block-level)網格
• inline-grid - 產生一個行級(inline-level)網格
• subgrid - 如果容器本身就是一個項目，就可以使用這個屬性來表示你想從它的父節點擷取它的行/列的大小，而不是指定它自己的大小。

    .grid_box {      background: #054154;      display: inline-grid;    //行級網路，和span處於一行    }    .grid_item {      background: #0490db;      border: 1px solid #fff;    }

    .grid_box {      background: #054154;      display: grid;    //塊級網路，將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,其他的所有行（不設定或者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;    }

和行高類似，這個代表第一列寬30px,第二列寬20px，第三列第四列平分剩餘寬度（和行高不同的是列寬是你設定了多少就會有多少列，列數量和你設定的是相同的）

grid-gap

• 【grid-gap】預設值為0，兩個屬性的縮寫，第一個grid-row-gap（行與行之間的間距），第二個grid-column-gap（列與列之間的間距）,只設定了一個值，表示行和列的間距相等*/

    .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;    }

一些文法糖repeat

• 你可能會問如果中間有很多列/行，每個都寫豈不是很麻煩，因此提供了repeat文法糖來簡化寫法

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

fr

• 另外，類似flex的1，grid裡面也有類似的'份數單位'---fr.

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

minmax

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

項目屬性grid-area

• 單體操作，控制個體的位置，淩駕於整體規則，4個屬性分別是 grid-row-start（開始行線）， grid-column-start（開始列線）， grid-row-end（結束行線），grid-column-end（結束列線）
• 比如下面用item3來單獨操作

    .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，這四條線組成的地區即是item3的位置，是不是很強大，太叼了這個

span,負數

• 你可能會問如果中間有很多列/行，那還要去數是第幾列線豈不是很麻煩，因此又有了最佳化
• 和js裡的slice類似，負數表示倒數
• 而span表示合并
• 因此本例中，以下都是等價的

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

order

• 如果有兩個子項目發生了重疊怎麼辦呢，就需要order來解決層級問題了。
• 和index類似於z-index，表明疊放順序，數值越大，越在上。允許負數。

    .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;    }

因為item3有order,所以item3蓋住了item4

命名

• 在我看來，命名是grid最強大的地方，你可以在容器裡面設定命名，然後在子項目裡面使用該命名
• 其中點號 . 代表一個空網格單元
• 比如我們來個常規的布局

  <div class="grid_box">    <div class="grid_item" id="header">header</div>    <div class="grid_item" id="aside">aside</div>    <div class="grid_item" id="content">content</div>    <div class="grid_item" id="footer">footer</div>  </div>  <span>鄰居元素</span>

    .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;    }

是不是很強大

• 另外，網路線也是可以命名的

  測試
• 以上就是一些常用的，基礎的使用方法，更深入的我們以後再來討論
• 如果你想檢測自己是否基本掌握了grid，可以使用以下的網址測試，是個有趣的小遊戲

• 小測試

最後

大家好，這裡是「 TaoLand 」，這個部落客要用於記錄一個菜鳥程式猿的Growth之路。這也是自己第一次做部落格，希望和大家多多交流，一起成長！文章將會在下列地址同步更新……
個人部落格：www.yangyuetao.cn
小程式：TaoLand