1. 前言

grid 佈局是 css 中的一種新的佈局方式，對盒子和盒子內容的位置及尺寸有很強的控制能力。與 flex 不同，flex 著重於單軸，而 grid 適應於多軸，下面就來做個簡單的介紹。

flex 佈局示意

grid 佈局示意

2. 基本概念

設定 display: grid; 的元素稱為容器，它的直接子元素稱為專案，但注意子孫元素不是專案。

grid line：網格線，構成 grid 佈局的結構，分為水平和豎直兩種。

grid track：兩條相鄰網格線之間的空間，可以認為是一行或者一列。

grid cell：兩條相鄰行和相鄰列之間分割線組成的空間，是 grid 佈局中的一個單元。

grid area：四條網格線包裹的全部空間，任意數量的 grid cell 組成一個 grid area。

3. 容器屬性

grid 容器的屬性還是有點多的，一共有 18 個，但是很多可以通過簡寫完成，所以也不用太緊張。

• grid-template 系列
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
• grid-gap 系列
  • grid-column-gap
  • grid-row-gap
• place-items 系列
  • justify-items
  • align-items
• place-content 系列
  • justify-content
  • align-content
• grid 系列
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow

3.1 grid-template 系列

3.1.1 grid-template-columns 、grid-template-rows

定義行和列的數量。

.container {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
複製程式碼

這樣就定義了一個三行三列的 grid 容器，grid-template-rows / grid-template-columns 接收的值有 auto、fr、px 和 %。

介紹一下 fr，其實也不難理解，類似 flex: 1 來就行了。

這裡可以給 grid line 命名，方便取到對應的 line 對 item 進行設定，詳情可以在下面 item 屬性上了解。

.container {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-columns: [column-1] 1fr [column-2] 1fr [column-3] 1fr [column-4];
  grid-template-rows: [row-1] 1fr [row-2] 1fr [row-3] 1fr [row-4];
}
/** 通過 repeat 方法可以簡寫如下
* 此處需要注意的就是線條命名變成了從1開始遞增，並且是用空格分隔字母和序號，類似: row 1、row 2、row 3
**/
.container {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-columns: repeat(3, 1fr column);
  grid-template-rows: repeat(3, 1fr row);
}
複製程式碼

3.1.2 grid-template-areas

grid 模板區域：通過給網格區域指定名稱，方便專案屬性 grid-area 取用網格區域，句法如下： grid-template-areas: none | grid-area-name | .(半形句號);

none: 為定義的網格區域;

grid-area-name: 定義的網格區域名稱，專案屬性 grid-area 使用; .: 空的網格單元格;

.container {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-columns: repeat(3, 1fr column);
  grid-template-rows: repeat(3, 1fr row);
  grid-template-areas:
    "header header header"
    "main . sidebar"
    "footer footer footer";  
}
.container>div {
  border: 1px solid lightcoral;
}
// 專案
.item1 {
  grid-area: header;
}
.item2 {
  grid-area: sidebar;
}
.item3 {
  grid-area: main;
}
.item4 {
  grid-area: footer;
}
// html
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
複製程式碼

最終效果圖如下：

注意：當使用了 grid-template-areas 對網格命名後，網格的行、列的開始線與結束線會自動獲得一個 name-start、name-end 的命名，所以也會出現同一條線擁有多個名稱的情況，例如 header-start, main-start, and footer-start。

.item1 {
  grid-area: header;
}
// 以上程式碼效果等同於
.item1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
複製程式碼

3.1.3 grid-template

終於到這個複合屬性了，該屬性類似 background、font、border 等，是對以上 grid-template 系列屬性的一個集合。

首先來看一下基礎語法： grid-template: none | grid-template-rows / grid-template-columns;

none: 將所有屬性重置為初始值;

grid-template-rows / grid-template-columns: 將 grid-template-columns 和 grid-template-rows 分別設定為指定值，並將 grid-template-areas 設定為none;

看到這可能有人會有疑問，說好的全部屬性呢，怎麼沒有看到 grid-template-area？實話說，句法有點複雜，下面單獨拎出來看看。

// 使用 grid-template 綜合之前的所有屬性
grid-template:
  [row1-start] "header header header" 1fr [row1-end]
  [row2-start] "main . sidebar" 1fr [row2-end]
  [row2-start] "footer footer footer" 1fr [row2-end]
  / [column-start] 1fr 1fr 1fr [column-end];

// -------------分割線-------------
.item1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
// 以上程式碼效果等同於
.item1 {
  grid-column-start: column-start;
  grid-column-end: column-end;
}
複製程式碼

3.2 grid-gap 系列

這個系列比較簡單，就是定義行與行，列與列之間的間隙，就直接用 grid-gap 來介紹了。

grid-gap: grid-row-gap grid-column-gap; 如果只寫一個值那就是行、列間隙一致。

注意: 在 Chrome 68+, Safari 11.2 Release 50+ and Opera 54+ 以上版本中，可以去掉 grid 字首，而只需要些 row-gap、column-gap、gap 了。

.containner {
  // ... 之前的程式碼
  grid-gap: 10px;
}
複製程式碼

為了區分，用紅色框出來原來的佈局，虛線間的間隔就是設定的 10px 的 gap。 示意圖如下:

3.3 place-items 與 place-content 系列

place-items: justify-items align-items;

place-content: justify-content align-content;

這兩個系列放在一起介紹，因為很多地方很相似，異曲同工。

justify-items： 網格項水平的對齊方式，預設是 stretch，其餘的值還有 start、end、center。

stretch:

start:

end:

center:

align-items：網格項垂直的對齊方式，整體如同 justify-items，不過水平換成了垂直。

// 下面兩個屬性需要我們調整一下之前的 css 程式碼，由於 place 系列需要某些特殊情況（就是 item 組成的網格大小小於容器）
.box {
  margin: 200px auto;
  display: grid;
  width: 500px;
  height: 500px;
  grid-template: 100px 100px / 100px 100px;
  gap: 10px;
  justify-content: start;
  border: 1px solid #ccc;
}

.box>div {
  border: 1px solid lightcoral;
}

.item1 {
  grid-column: 1;
  grid-row: 1;
}

.item2 {
  grid-column: 2;
  grid-row: 1;
}

.item3 {
  grid-column: 1;
  grid-row: 2;
}

.item4 {
  grid-column: 2;
  grid-row: 2;
}
複製程式碼

justify-content：網格整體相對於容器的水平對齊方式，預設值是 start，其餘的值還有 end、center、stretch、space-around、space-between、space-evenly。

start:

end:

center:

stretch: 在這個例子中與 start 相同。

space-around:

space-between:

space-evenly:

align-content：就是與 justify-content 相反的操作了。

3.4 grid 系列

grid-auto-columns 與 grid-auto-rows 可以用來定義我們超出網格格數的隱式網格的大小。

.box {
  grid-auto-columns: 100px;
  grid-auto-rows: 100px;
}
複製程式碼

以上如果沒有定義 grid-template 之類的屬性的話，會根據 item 來生成 100 * 100 px 的網格。

.item4 {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}
複製程式碼

如果有一個這樣 item 定義超出了網格數，那麼它的大小就是 grid-auto 設定的 100 * 100 px，這裡要只能通過 grid-auto-columns 調整自動建立的 item 的寬度，高度不可以。

grid-auto-flow：定義了 item 的自流向方向，舉個例子。

// html
<div class="box">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

// css
.box {
  margin: 200px auto;
  display: grid;
  width: 500px;
  height: 500px;
  grid-template: 1fr 1fr 1fr 1fr / 1fr 1fr;
  grid-auto-flow: row;
  gap: 10px;
  justify-content: start;
}

.box>div {
  border: 1px solid lightcoral;
}

.item1 {
  grid-column: 1 / 3;
  grid-row: 1;
}

.item4 {
  grid-column: 1 / 3;
  grid-row: 4;
}
複製程式碼

row 的情況：

column 的情況：

gird：是以下屬性的縮寫形式——grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow。但是要注意的是，你只能同時宣告顯示屬性或者隱式屬性。

/** 
* 隱式屬性部分
**/
grid: auto-flow / 1fr 1fr 1fr;
// 等同於
grid-auto-flow: row;
grid-template-columns: 1fr 1fr 1fr;

grid: auto-flow dense 100px / 1fr 1fr 1fr;
// 等同於
grid-auto-flow: row dense;
grid-auto-rows: 100px;
grid-template-columns: 1fr 1fr 1fr;

/** 
* 顯示屬性部分
**/
gird: 1fr 1fr 1fr / 1fr 1fr 1fr;
// 等同於
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;

/**
* 複雜屬性
**/
grid: [row1-start] "header header header" 1fr [row1-end]
      [row2-start] "main . sidebar" 1fr [row2-end]
      [row3-start] "footer footer footer" 1fr [row3-end] / 1fr 1fr 1fr;
// 等同於
grid-template-areas:
  "header header header"
  "footer footer footer";
grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end row3-start] 1fr [row3-end];
grid-template-columns: 1fr 1fr 1fr;
複製程式碼

4. 專案屬性

這裡有一個要注意的地方，flaot、display（inline-table、contents、 table 除外）、vertical-align 以及 column-* 對 grid item 專案無效。

4.1 grid-column、grid-row

旗下有 4 個屬性：grid-column-start、grid-column-end、grid-row-start、grid-row-end，用來確定 item 的位置。

屬性的值有：number | lineName | span <number> | span <lineName> | auto

對屬性的值以 9 宮格為例介紹。

number：從左往右從上往下分別是 1、2、3、4 四條。

lineName：在容器上定義的分隔線的名稱。

span <number> | span <lineName>：跨度的個數和跨到某條分隔線。

auto：自動跨度或預設 1 個跨度。

// 將某個 item 定位到 第 2 行第 3 列
// number
.item {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
// lineName
.container {
  // ...
  grid-template-columns: [column-1] 1fr [column-2] 1fr [column-3] 1fr [column-4];
  grid-template-rows: [row-1] 1fr [row-2] 1fr [row-3] 1fr [row-4];
}
.item {
  grid-column:column-3 / column-4;
  grid-row: row-2 / row-3;
}
// span <number> | span <name>
.item {
  grid-column:column-3 / span 1;
  grid-row: row-2 / span row-3;
}
複製程式碼

4.2 grid-area

通過容器 grid-template-areas 設定的名稱設定 item 位置，也可以當做是 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的縮寫。

.container {
  // ...
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "main . sidebar" 1fr [row2-end]
        [row3-start] "footer footer footer" 1fr [row3-end] / 1fr 1fr 1fr;
}
.item-1 {
  grid-area: header;
}
// 另一種寫法
.item {
  grid-area: row1-start / 1 / row1-end / 4;
}
複製程式碼

4.3 place-self

旗下有 justify-self、align-self 兩個屬性：沿著內聯（行/列）軸對齊單元格內的網格項，主要的值有：start | end | center | stretch。

place-self: align-self justify-self;

.item-1 {
  place-self: center stretch;
}
複製程式碼

5. 補充

顯式網格：通過使用 grid-template-columns 和 grid-template-rows 屬性顯式設定的一個網格的列和行。

隱式網格：grid-auto-flow 預設流，grid-auto-flow 屬性可以改變預設流方向 row 為 column。