CSS Grid布局入門


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

介紹

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

  • 兼容性目前不是太友好
    1.png

  • 和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;
    }

2.png

    .grid_box {
      background: #054154;
      display: grid;    //塊級網絡,將span擠入下一行
    }

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

3.png

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的行)平分剩余高度

4.png

  • 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,第三列第四列平分剩余寬度(和行高不同的是列寬是你設置了多少就會有多少列,列數量和你設置的是相同的)

5.png

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

6.png

一些語法糖

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的位置,是不是很強大,太叼了這個

7.png

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

8.png

命名

  • 在我看來,命名是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;
    }

9.png

是不是很強大

  • 另外,網絡線也是可以命名的

測試

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

最后

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

打賞

免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2021 CODEPRJ.COM