CSS：玩轉grid佈局

舊巷老友發表於2018-07-13
CSS

概述

相信大家在一些佈局的時候會用到flex佈局，但是flex佈局只是一維佈局，而grid是二維佈局神器，所以我就把這篇文章分享給大家，希望大家能夠喜歡。

grid介紹

針對於Web佈局而言，個人認為Grid佈局將是Web佈局的神器，它改變了以往任何一種佈局方式或者方法。不管以前的採用什麼佈局方法都可以說是一維的佈局方式，而Grid最大的特色，是一個基於網格的二維佈局系統，目的是用來優化使用者介面設計。

1.啟用grid容器

我們使用display屬性來定義一個網格容器，它的grid值決定了容器展現為塊級還是內聯形式。一旦啟用網格容器，它的所有子元素都進入grid文件流，稱為網格子項。

display: grid | inline-grid | subgrid 
複製程式碼

  • grid：定義一個塊級的網格容器
  • inline-grid：定義一個內聯的網格容器
  • subgrid：定義一個繼承其父級網格容器的行和列的大小的網格容器，它是其父級網格容器的一個子項。

tips: column, float, clear和vertical-align對網格容器沒有效果。

2、網格容器的屬性

2.1grid-template-columns/grid-template-rows

用法：

grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
grid-template-rows: <track-size> ... | <line-name> <track-size> ...;複製程式碼

  • <track-size>：定義網格單元的寬高，其單位可以是一個長度(如px、em、rem、vw、vh)或百分比，也可以是網格中自由空間的份數(單位為fr)。
  • <line-name>：定義網格線的名稱，它不是必須值。可以一個你選擇的任意名字，當沒有顯示設定時，它的名字以數字表示。

例項:

css:

    .container {        
        width: 500px;        
        height: 500px;        
        display: grid;        
        grid-template-columns: 33% 33% 33%;
        grid-template-rows: 33% 33% 33%;
    }    
    .container div {        
        border: 1px solid #000;    
    }複製程式碼

html:

    <div class="container">
        <div></div>
        <div></div>
        <div></div> 
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>複製程式碼

最終效果

CSS：玩轉grid佈局

也可以通過命名來寫效果一樣，多個命名的話要加上空格隔開

.container{
     grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];  
}複製程式碼

如果你定義了容器的重複部分，你可以使用repeat()方法來生成多個相同值：

.container{
     grid-template-columns: repeat(3, 33%);  
}
/* 等價於 */
.container{
     grid-template-columns: 33% 33% 33%
}複製程式碼

特殊單元：fr

fr單元允許你將網格容器中的自由空間設定為一個份數：
.container{     
    grid-template-columns: repeat(3, 1fr);  
    grid-template-rows: repeat(3, 1fr);
}
複製程式碼
在上面的程式碼中，將網格容器的每個子項設定為三分之一。

上邊這個是平均分成三份比設為33%要好很多，效果圖也差不多。

tips：自由空間是在固定子項確定後開始計算的.

2.2 grid-template-areas

grid-template-areas可以配合grid-area定義一個顯式的網格區域。grid-template-areas定義網格區域，然後使用grid-area呼叫宣告好的網格區域名稱來放置對應的網格專案。

用法:
grid-template-areas: "<grid-area-name> | . | none | ..." "..." 
複製程式碼
  • <grid-area-name>：在grid-area中指定的網格區域名字
  • .：一個句點表示一個空的網格單元
  • none：沒有網格區域被定義

例項:

css:

    .item-a{   
        grid-area: header;          
        background: black;
    }  
    .item-b{   
        grid-area: main;
        background: blue;
    }  
    .item-c{   
        grid-area: sidebar;
        background: chartreuse;
    }  
    .item-d{   
       grid-area: footer;
       background: red;
    }  
.container{    
    width: 500px;
    height:200px;           
    margin-top: 20px;
    display:grid;   
    grid-template-columns: 1fr 1fr 1fr 1fr;   
    grid-template-rows: 1fr 1fr 1fr;   
    grid-template-areas: "header header . footer" "main main . sidebar" "main main . sidebar";  
}
複製程式碼

html:

    <div class="container">
              <div class="item-a"></div> 
              <div class="item-b"></div>
              <div class="item-c"></div>
              <div class="item-d"></div>           
    </div>複製程式碼

最終效果

CSS：玩轉grid佈局

2.3 grid-column-gap/grid-row-gap/grid-gap


指定網格線的大小，也可以說是網格子項之間的間距。

詞法：
grid-column-gap: <line-size>grid-row-gap: <line-size>複製程式碼
  • <line-size>：長度值

grid-gap是grid-column-gap和grid-row-gap的簡稱：
grid-gap: <grid-column-gap> <grid-row-gap>複製程式碼
如果只有一個值，grid-row-gap的值將和grid-column-gap一樣。

例項:

css:

    .container {
        width: 500px;
        height: 500px;
        display: grid;        
        grid-template-columns: repeat(3, 30%);        
        grid-template-rows: repeat(3, 30%);
        grid-column-gap: 2%;
        grid-row-gap: 2%;    
    }複製程式碼

html:

     <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

複製程式碼

最終效果

CSS：玩轉grid佈局

2.4 justify-items/align-items


justify-items
讓網格子項的內容和列軸對齊（align-items則相反，是和行軸對齊），這個值對容器裡面的所有網格子項都有用，flex裡邊沒有這個屬性。
justify-items: start | end | center | stretch複製程式碼

  • start：內容和網格區域的左邊對齊
  • end：內容和網格區域的右邊對齊
  • center：內容和網格區域的中間對齊
  • stretch：填充整個網格區域的寬度（預設值）

CSS：玩轉grid佈局

align-items


讓網格子項的內容和行軸對齊，這個值對容器裡面的所有網格子項都有用。
align-items: start | end | center | stretch;
複製程式碼
  • start：內容和網格區域的頂部對齊
  • end：內容和網格區域的底部對齊
  • center：內容和網格區域的中間對齊
  • stretch：填充整個網格區域的高度（預設值）

CSS：玩轉grid佈局

2.5 justify-content/align-content


justify-content

如果用像px非彈性單位定義的話，總網格區域大小有可能小於網格容器，這時候你可以設定網格的對齊方式（垂直於列網格線對齊）。
justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;
複製程式碼
  • start:左對齊
  • end：右對齊
  • center：居中對齊
  • stretch：填充網格容器
  • space-around：在每個網格子項中間放置均等的空間，在始末兩端只有一半大小
  • space-between：兩邊對齊，在每個網格子項中間放置均等的空間，在始末兩端沒有空間
  • space-evenly：網格間隔相等，包括始末兩端
CSS：玩轉grid佈局
align-content

如果用像px非彈性單位定義的話，總網格區域大小有可能小於網格容器，這時候你可以設定網格的對齊方式（垂直於行網格線對齊）。
align-content: start | end | center | stretch | space-around | space-between | space-evenly 
複製程式碼
  • start：頂部對齊
  • end：底部對齊
  • center：居中對齊
  • stretch：填充網格容器
  • space-around：在每個網格子項中間放置均等的空間，在始末兩端只有一半大小
  • space-between：上下對齊，在每個網格子項中間放置均等的空間，在始末兩端沒有空間
  • space-evenly：在每個網格子項中間放置均等的空間，包括始末兩端

CSS：玩轉grid佈局

上邊的屬性除了justify-items之外其餘的屬性flex都有這個我就不舉例了。

2.6 grid-auto-columns/grid-auto-rows


自動生成隱式網格軌道（列和行），當你定位網格項超出網格容器範圍時，將自動建立隱式網格軌道。
grid-auto-columns: <track-size>grid-auto-rows: <track-size>複製程式碼
  • <track-size>：可以是一個長度，百分比或者是一個網格中自由空間的份數（通過使用fr單位）
為了說明隱式網格軌跡如何被建立，思考一下這個：
.container{  
    display: grid;   
    grid-template-columns: 60px 60px;     
    grid-template-rows: 90px 90px  
}複製程式碼

我們建立了一個2*2的網格

CSS：玩轉grid佈局

但現在想象你使用grid-column和grid-row來定位你的網格子項，就像這樣：


.item-a{
     grid-column: 1 / 2;
     grid-row: 2 / 3;  
}  
.item-b{
     grid-column: 5 / 6;
     grid-row: 2 / 3;  
}複製程式碼

CSS：玩轉grid佈局

我們告訴.item-b在第 5 列網格線開始第 6 列網格線結束，但我們還沒有定義第 5 或者第 6 列。因為我們引用的線不存在，0 寬度的隱式網格軌跡將被建立來填充這些空缺。我們可以使用grid-auto-columns和grid-auto-rows來指定這些隱式網格軌跡的寬度：

.container{
     grid-auto-columns: 60px;  
}複製程式碼

CSS：玩轉grid佈局

例項:

css:

    .container3 {
        display: grid;
        grid-template-columns: 60px 60px;
        grid-template-rows: 90px 90px;
        grid-auto-columns: 60px;      
    }    
    .item1{
        background: red;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }  
    .item2{
        background: green;
        grid-column: 5 / 6;
        grid-row: 2 / 3;
      }複製程式碼

html:

    <div class="container3">
         <div class="item1"></div>
         <div class="item2"></div>           
    </div>複製程式碼

效果圖

CSS：玩轉grid佈局

2.7 grid-auto-flow


在沒有設定網格項的位置時，這個屬性控制網格項怎樣排列。
grid-auto-flow: row | column | row dense | column dense複製程式碼
  • row：按照行依次從左到右排列
  • column：按照列依次從上到下排列
  • dense：按先後順序排列

例項:

css: grid-auto-flow設為row

   .container4{   
        display: grid;   
        grid-template-columns: 200px 200px 200px 200px 200px;   
        grid-template-rows: 200px 200px;   
        grid-auto-flow: row;          
        color: #fff;
    }    
    .item3{   
        grid-column: 1;   
        grid-row: 1 / 3;
        background: red;
    }  
    .item7{   
        grid-column: 5;   
        grid-row: 1 / 3;
        background: bisque;
    }
    .item5{
           background: black;    
    }
    .item6{
           background: blueviolet;
    }
    .item4{
           background: blue;    
    }
複製程式碼

html:

    <div class="container4">
         <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
        <div class="item7">7</div>
    </div>複製程式碼

效果：

CSS：玩轉grid佈局

grid-auto-flow設為column

CSS：玩轉grid佈局

2.8 grid


grid是一種簡寫形式：
grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ];複製程式碼

3、網格子項的屬性

3.1 grid-column-start/grid-column-end/grid-row-start/grid-row-end/grid-column/grid-row

通過網格線來定義網格項的位置。grid-column-start、grid-row-start定義網格項的開始位置，grid-column-end、grid-row-end定義網格項的結束位置。

grid-column-start: <number> | <name> | span <number> | span <name> | auto ; grid-column-end: <number> | <name> | span <number> | span <name> | auto ;grid-row-start: <number> | <name> | span <number> | span <name> | auto ; 
grid-row-end: <number> | <name> | span <number> | span <name> | auto ;複製程式碼

  • <number> | <name>：可以是一個數字以適用被標記了數字號的網格線，或者是一個名字以適用命名了的網格線
  • span <number>：子項將跨越指定數字的網格軌跡
  • span <name>：子項將跨越指定名字之前的網格線
  • auto：自動佈局，自動跨越或者預設跨越一個。

例項：

css:

.item-a{
     grid-column-start: 2;
     grid-column-end: five;
     grid-row-start: row1-start;
     grid-row-end: 3  
}複製程式碼

CSS：玩轉grid佈局

.item-b{
     grid-column-start: 1;
     grid-column-end: span col4-start;
     grid-row-start: 2;
     grid-row-end: span 2  
}複製程式碼

CSS：玩轉grid佈局

grid-column是grid-column-start和grid-column-end的簡稱；grid-row是grid-row-start和grid-row-end的簡稱。

grid-column: <start-line> / <end-line> | <start-line> / span <value>;   
grid-row: <start-line> / <end-line> | <start-line> / span <value>;複製程式碼

例項：

css:

.item-c{
     grid-column: 3 / span 2;
     grid-row: third-line / 4;  
}複製程式碼

CSS：玩轉grid佈局

3.2 grid-area

給網格子項取一個名字以讓它被由grid-template-areas屬性建立的模板引用。同時，這個屬性還可以用來更簡短地表示grid-row-start+ grid-column-start + grid-row-end+ grid-column-end。

grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
複製程式碼

  • <name>：選擇的名字
  • <row-start> / <column-start> / <row-end> / <column-end> – 可以是網格線的數字或名字

例項：

.item-d{
     grid-area: header
  }複製程式碼

作為grid-row-start+ grid-column-start + grid-row-end+ grid-column-end的一種簡寫：

.item-d{
     grid-area: 1 / col4-start / last-line / 6  
}複製程式碼

CSS：玩轉grid佈局

3.3 justify-self/align-self

（1）justify-self


讓網格子項的內容以列軸對齊（與之相反align-self是跟行軸對齊），這個值可以應用在單個網格子項的內容中。

justify-self: start | end | center | stretch複製程式碼

  • start – 讓內容在網格區域左對齊
  • end – 讓內容在網格區域右對齊
  • center – 讓內容在網格區域中間對齊
  • stretch – 填充著呢個網路區域的寬度（預設值）


CSS：玩轉grid佈局

（2）align-self


讓網格子項的內容以行軸對齊（與之相反justify-self是跟列軸對齊），這個值可以應用在單個網格子項的內容中。

align-self: start | end | center | stretch複製程式碼

  • start – 讓內容在網格區域上對齊
  • end – 讓內容在網格區域下對齊
  • center – 讓內容在網格區域中間對齊
  • stretch – 填充著呢個網路區域的高度（預設值）

CSS：玩轉grid佈局

如果覺得文章還不錯並對你有幫助的話，請分享給你的小夥伴，並點贊，點亮紅心的人最美，有什麼不懂得可以在底下留言哦。

如果想看原始碼的話可以去我的github上下載，歡迎star，github：https://github.com/Mr-MengBo/grid



相關文章