grid佈局

基本概念

Grid佈局，也叫"網格佈局"，提供了帶有行和列的基於網格的佈局系統，它使網頁設計變得更加容易，而無需使用浮動和定位

任何一個容器都可以指定為Grid佈局

/* 塊級元素 */
.box {
   dispaly: grid;
}
/* 行內元素 */
.box {
    dispaly: inline-grid;
}

當父元素被設為grid佈局後，子元素的float、display: inline-block和display: table-cell屬性都會失效

採用 Grid 佈局的元素，稱為 Grid 容器，簡稱為"容器"，它的所有子元素自動成為容器成員，稱為 Grid 專案，簡稱為"專案"

容器屬性

• grid-template-columns 定義每一列的列寬

• grid-template-rows 定義每一行的行高

  .container {
     display: grid;
     /* 例：寬200px，高100px */
     grid-template-columns: 200px 200px 200px;
     grid-template-rows: 100px 100px 100px;
  }
  

  • repeat() 接受兩個引數，第一個引數是重複的次數，第二個引數是所要重複的值

  .container {
     display: grid;
     grid-template-columns: repeat(3,200px);  /* grid-template-columns: 200px 200px 200px */
     grid-template-rows: repeat(3,200px);  /* grid-template-rows: 200px 200px 200px */
  }
   
  

  .container {
     display: grid;
     grid-template-columns: repeat(3,200px 100px);  /* 六列 */
     /* grid-template-columns: 200px 100px 200px 100px 200px 100px */ 
  }
  

  • auto-fill 自動填充換行，讓一行（或者一列）中儘可能的容納更多的單元格

  只需要確定列寬或者行高，而不用管有多少列

  .container {
     display: grid;
     grid-template-columns: repeat(auto-fill,200px);
     grid-template-rows: repeat(3,200px);
  }
   
  

  • fr 代表網格容器中可用空間的一等份

  .container {
     display: grid;
     /* 第一列、第二列和第三列自動鋪滿整個容器，且三列等寬 */
     grid-template-columns: 1fr 1fr 1fr ;
     grid-template-rows: repeat(3,200px)
  }
  

  • 與px等絕對長度聯用

  .container {
     display: grid;
     /* 第一列為200px，第二列和第三列自動鋪滿整個容器，且第二列寬度為第三列一半 */
     grid-template-columns: 200px 1fr 2fr ;
     grid-template-rows: repeat(3,200px)
  }
  

  • minmax() 產生一個長度範圍，表示長度就在這個範圍之中都可以應用到網格專案中

  .container {
     display: grid;
     /* 第三列的列寬不小於100px，不大於1fr */
     grid-template-columns: 200px 1fr minmax(100px,1fr);
     grid-template-rows: repeat(3,200px)
  }
  

  • auto 由瀏覽器自行決定長度，儘可能的會佔滿剩餘空間

  .container {
     display: grid;
     /* 第二列的寬度等於可用的最大寬度 */
     grid-template-columns: 200px auto 200px;
     grid-template-rows: repeat(3,200px)
  }
  

  • 網格線 grid-template-columns和grid-template-rows裡面，還可以使用方括號指定每一根網格線的名字，方便引用

  .container {
     display: grid;
     /* 一個3*3的網格區域，就需要有4條水平線，4條垂直線 */
     grid-template-columns: [c1] 200px [c2] 25% [c3] 200px [c4];
     grid-template-rows: [r1] 200px [r2] 200px [r3] 200px [r4];
  }
  

  網格佈局允許同一根線有多個名字，比如[fifth-line row-5]

• row-gap 設定行與行的間隔（行間距）

• column-gap 設定列與列的間隔（列間距）

• gap: <row-gap> <column-gap> 合併寫法

  .container {
     grid-template-columns: repeat(3,200px);
     grid-template-rows: repeat(3,200px);
     row-gap: 10px;
     column-gap: 20px;
     /* 等同於 gap: 10px 20px */
  }
  

• grid-template-areas 用於定義區域

  .container {
     display: grid;
     grid-template-columns: 100px 100px 100px;
     grid-template-rows: 100px 100px 100px;
     grid-template-areas: 'a b c'
                          'd e f'
                          'g h i';
  }
  

  定義9個單元格，然後將其定名為a到i的九個區域

  .container {
     display: grid;
     grid-template-columns: 100px 100px 100px;
     grid-template-rows: 100px 100px 100px;
     grid-template-areas: 'header header header'    
  			'main main aside'   
  			'footer footer footer';
     /* 第一行  header，高100px，寬300px */
     /* 第二行  main，高100px，寬200px  aside，高100px，寬100px*/
     /* 第三行  footer，高100px，寬300px */
  }
  

  定義9個單元格，通過合併變為4個區域

  區域的命名會影響到網格線，每個區域的起始網格線(上，左)，會自動命名為區域名-start，終止網格線（下、右）自動命名為區域名-end

• grid-auto-flow 改變放置順序

  row 先行後列（即從左到右放置，鋪滿一行後換行）【預設】

  column 先列後行（即從上到下放置，鋪滿一列後換列）

  row dense 某些專案指定位置以後，剩下的專案怎麼自動補齊空位

  column dense 某些專案指定位置以後，剩下的專案怎麼自動補齊空位

• justify-items 設定所有單元格內容的水平位置

  start 對齊單元格的最左邊

  end 對齊單元格的最右邊

  center 單元格內部居中

  stretch 拉伸，佔滿單元格的整個寬度【預設值】

• align-item 設定所有單元格內容的垂直位置

  start 對齊單元格的最上邊

  end 對齊單元格的最下邊

  center 單元格內部居中

  stretch 拉伸，佔滿單元格的整個寬度【預設值】

• place-items align-items和justify-items的合併形式

  place-items: ;

  例： place-items: start end;

  如果省略第二個值，則預設與第一個值相等

• justify-content 設定整個內容區域在容器裡面的水平位置

  start 對齊單元格的最左邊

  end 對齊單元格的最右邊

  center 單元格內部居中

  stretch 拉伸，佔滿單元格的整個寬度【預設值】

  space-around 均勻對齊，每個專案兩側都等距，所以專案之間的間距比專案與邊框之間的大一倍

  space-between 兩端對齊，兩端專案居最上最下，中間專案等距分佈

  space-evenly 均勻對齊，每個專案兩側都等距，並且與專案到邊框之間的距離也相等

• align-content 設定整個內容區域在容器裡面的垂直位置

  start 對齊單元格的最上邊

  end 對齊單元格的最下邊

  center 單元格內部居中

  stretch 拉伸，佔滿單元格的整個寬度【預設值】

  space-around 均勻對齊，每個專案兩側都等距，所以專案之間的間距比專案與邊框之間的大一倍

  space-between 兩端對齊，兩端專案居最上最下，中間專案等距分佈

  space-evenly 均勻對齊，每個專案兩側都等距，並且與專案到邊框之間的距離也相等

• grid-auto-columns 定義隱式網格的寬度

• grid-auto-rows 定義隱式網格的高度

  .container {
     display: grid;
     grid-template-columns: 200px 200px 200px 200px;
     grid-template-rows: 200px 200px;
     gap: 10px 10px;grid-auto-rows: 50px;
  }
  

  例如上面設定了一個4*2的網格，但是一共放置了9個專案，則可以通過grid-auto-rows: 50px設定了第九個網格高度為50px

專案屬性

• grid-column-start 左邊框所在的垂直網格線

• grid-column-end 右邊框所在的垂直網格線

• grid-row-start 上邊框所在的水平網格線

• grid-row-end 下邊框所在的水平網格線

  .container {
     display: grid;
     grid-template-columns: 200px [def] 200px 200px [abc];
     grid-template-rows: 200px 200px 200px;
     gap: 10px 10px;
     }
  .item1 {
     /* 第2條豎邊開始，第4條豎邊結束 */
     grid-column-start: 2;
     grid-column-end: 4;
     /* 也可以使用網格線的名字 */
     /* grid-column-start: def; */
     /* grid-column-end: abc; */
  }
  .item2 {
     /* 第1條豎邊開始，第3條豎邊結束 */	
     grid-column-start: 1;	
     grid-column-end: 3;
     /* 第2條橫邊開始，第4條橫邊結束 */	
     grid-row-start: 2;	
     grid-row-end: 4;
  }
  .item3 {
     /* span X 橫跨X個網格 */
     grid-column-end: span 2;  /* 等同於 grid-column-start: span 2; */
  }
  

• grid-column grid-column-start和grid-column-end的合併形式

• grid-row grid-row-start和grid-row-end的合併形式

  grid-column: / ;
  grid-row: / ;

  .item1 {
     grid-column: 1 / 3;
     grid-row: 1 / 2;
  }
  /* 等同於 */
  .item1 {
     grid-column: 1 / span 2;
     grid-row: 1 / 2;
  }
  /* 等同於 */
  .item1 {
     grid-column-start: 1;
     grid-column-end: 3;
     grid-row-start: 1;
     grid-row-end: 2;
  }
  

  斜槓以及後面的部分可以省略，預設寬度一個網格

  .item1 {
     /* item1位於第二列第三行 */
     grid-column: 2;
     grid-row: 3;
  }
  

• grid-area 指定專案放在哪一個區域

  • 與grid-template-areas聯用

  .container {
     display: grid;
     grid-template-columns: 100px 100px 100px;
     grid-template-rows: 100px 100px 100px;
     grid-template-areas: 'a b c'
                     	 'd e f'
                     	 'g h f';
  }
  .item1 {
     /* item1位於第三列跨第二三行 */
     grid-area: f;
  }
  

  • 與grid-row-start、grid-column-start、grid-row-end、grid-column-end聯用

  grid-area: / / / ;

  .item-1 {   
     /* 第1條橫邊開始，第3條橫邊結束 */ 	
     /* 第2條豎邊開始，第4條豎邊結束 */ 	
     grid-area: 1 / 2 / 3 / 4;
  }
  

• justify-self 設定指定單元格內容的水平位置

  start 對齊單元格的最左邊

  end 對齊單元格的最右邊

  center 單元格內部居中

  stretch 拉伸，佔滿單元格的整個寬度【預設值】

• align-self 設定指定單元格內容的垂直位置

  start 對齊單元格的最上邊

  end 對齊單元格的最下邊

  center 單元格內部居中

  stretch 拉伸，佔滿單元格的整個寬度【預設值】

• place-self align-self和justify-self的合併形式

  place-self: ;

  例：place-self: center center;

  如果省略第二個值，則預設與第一個值相等