CSS Grid Layout 手記（教程指南）

夢幻神化發表於2019-04-11

CSS

本文首發於個人部落格：藍色夢想。

CSS Grid Layout（網格/柵格佈局）是 CSS 最強大的佈局系統，隨著裝置和瀏覽器的升級，將會是未來的主流的佈局方案之一。

一、介紹(Introduction)

概述(Basic)

CSS Grid Layout 簡稱為Grid，網上普遍譯為網格，其實更規範的說法應為柵格。

柵格對有經驗的 UI 和 FE 來說並不陌生，肯定會想到柵格系統(Grid Systems)。

這“系統”早在歐洲中世紀就已經出現，當時主要用於文字排版，隨著時間的推移逐步發展到平面及其他“設計”領域。

在我印象中 08~09 年左右，網頁柵格化設計(Grid Design)已經出現並被廣泛使用，所定義的12柵格、24柵格等規範方案仍一直被沿用至今。用通俗的方式來講：就是以一定規則的網格陣列，規範化網頁佈局。

CSS Grid包含了柵格化設計的特性，是第一個專門為解決佈局問題而建立的CSS 模組。如果你熟悉柵格系統和柵格化設計那對柵格佈局的理解會起到一定幫助。

好的柵格佈局，對於模組、元素而言都有規律可循，能在不同尺寸/解析度下呈現最優的方式，使網頁更靈活和易於擴充套件。但同時也考驗設計師，對於不同尺寸的把握，針對前端來說也是如此。

之前使用柵格需要用到Bootstrap等的框架，並且每個框架都有一套屬於自己的柵格規範，現在網格佈局使我們可以更為簡單的實現，無需依賴框架。

佈局對比(CSS Grid VS Flexbox)

如果用過 Flexbox，就會發現兩者在佈局上有很多相似性，都是由父容器來控制子元素的顯示和佈局。

Flexbox 彈性佈局：

一維佈局系統，基於軸線，但只能沿著座標軸的一個方向進行佈局。
主要作用是通過父容器調節子專案的寬、高和排列順序，以最佳方式填充父容器內的空間，從而實現自適應。
適合元件與小規模的佈局。

CSS Grid 網格佈局：

二維佈局系統，同樣基於軸線，但能同時沿著 X 軸和 Y 軸進行佈局。
它將容器劃分成一個個網格（類似 Table/Excel 表格），實現了行(row)和列(column)，形成不同的空間。通過網格間的不同組合（合併單元格），實現多樣的佈局。
適合框架與較大規模的佈局。

CSS Grid 不是萬能，也不能取代 Flexbox。正確的操作方式應為結合 Flexbox 一起使用，發揮雙劍合璧的作用。

二、重要術語(Important Terminology)

為了更好的學習 CSS Grid，需要對一些重要術語有所瞭解。

網格容器(Grid Container)

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

使用網格佈局的區域container，稱為網格容器(Grid Container)。

網格項(Grid Item)

<div class="container">
  <div class="item"></div>
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>
複製程式碼

網格容器的所有直接子元素，都是網格項(Grid Item)。這裡的item就是直接子元素，但不包括像sub-item這樣的子孫元素。

網格項對float、display: inline-block、display: table-cell、vertical-align和column-*等設定都將失效。
網格項本身也可以是容器，通過巢狀所產生的元素，稱之子網格(Subgrids)。

網格線(Grid Line)

網格的分隔線，稱為網格線。

網格軌道(Grid Track)

容器內的兩條相鄰網格線之間的區域，稱為網格軌道。分成橫向軌道和縱向軌道，也就是網格中的行(row)和列(column)。

網格間隙(Grid Gap)

網格線的大小，就是網格間隔，按照柵格系統的說法也稱為水槽(Gutter)。用水槽於分割網格軌道，最直白的理解就是行間距和列間距。

網格單元格(Grid Cell)

兩個相鄰的行網格線和兩個相鄰的列網格線之間的空間（行和列交匯構成的區域），在概念上類似與 Table 單元格，稱為網格單元格。

網格區域(Grid Area)

由一個或者多個網格單元格組合而成的區域，稱為網格區域。

三、目錄(Table of Contents)

網格的結構，比如有多少行、多少列以及他們的大小，都由網格容器的屬性來控制。網格項的位置由該容器內子元素的屬性來控制。它們都僅為上下級關聯，屬性定義不會影響到子孫元素和其他元素。

對於新手而言，建議下載新版的 Firefox，DevTools 可以幫助你檢視網格線和網格軌跡，並且只針對使用了CSS Grid Layout的元素才顯示。雖然 Chrome 也支援，但顯示效果略微欠缺。

1. 網格容器(Grid Container)

通過將display屬性設定為gird或inline-grid來建立網格容器。

預設情況下容器元素都是塊級元素。

.container {
  display: grid;
}
複製程式碼

DEMO 1-1

把值設定為inline-grid就變成了行內元素。

.container {
  display: inline-grid;
}
複製程式碼

DEMO 1-2

2. 顯示網格(Explicit Grid)

使用grid-template-rows、grid-template-columns、grid-template-area屬性，可以定義網格固定數量的線和軌道，這些被手動定義過的網格，稱為顯示網格。

grid-template-rows、grid-template-columns屬性，定義了網格軌道的大小（即：行高和列寬)，及網格線名稱，但名稱是可選引數。

/* 官方語法 */
none | <track-list> | <auto-track-list>
/* 語法解釋 */
<track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
複製程式碼

2.1 行高設定(Row Track Sizes)

.container {
  display: grid;
  grid-template-rows: 150px 100px;
}
複製程式碼

在本例中：
因為只定義了 2 行軌道值，即 item-1、2，所以剩餘的 item 的軌道高度由自身內容而定。

DEMO 2-1

2.3 列寬設定(Column Track Sizes)

.container {
  display: grid;
  grid-template-columns: 150px 100px 200px;
}
複製程式碼

在本例中：
雖然只定義了 3 列軌道值，但剩的 item 都與 item-1、2、3 在同一列軌道上，所以 item-4 的列寬等於 item-1，類似 table 的列寬設定。

DEMO 2-2

2.3 fr單位(Fgrid Spanr Unit)

<track-size> 除了使用常規的px,%,em等長度單位之外，還可以使用fr。

fr為fraction(片段/一小部分)的縮寫，表示網格容器中空間的一小部分。是一個伸縮/柔性長度(Flexible Lengths)單位，響應剩餘的空間，該單位的使用讓網格建立更為靈活，但fr不能在calc()等函式中使用。

.container {
  display: grid;
  grid-template-columns: 60px 1fr 2fr 25%;
}
複製程式碼

在本例中：
第2列為1fr，第3列為2fr，表示第3列所佔空間是第2列的兩倍。由於fr是基於剩餘空間計算，所以要先減去第1列、第4列的固定尺寸的大小。
網格容器寬度為 500px，即：1fr = ((容器寬度：500) - (第1列寬度：60) - (第4列寬度：500*25%)) / 3 = 105

DEMO 2-3

2.4 網格線命名(Naming lines)

可以通過[]給網格線指定名稱，並且每條網格線允許有多個名字，只需要用空格[*-name1 *-name2]隔開即可。

在構建複雜的網格佈局時，給網格線命名會變的很有必要，其主要目的是為了便於網格項的定位，此時會讓程式碼更易讀也更容易被使用。

.container {
  display: grid;
  grid-template-rows: [row-first] 1fr [row-second] 1fr [row-third] 1fr [row-last];
  grid-template-columns: [col-first] 1fr [col-first-end col-second] 1fr [col-third] 1fr [col-last];
}
複製程式碼

在本例中：
由於是 3x3 的九宮格佈局，所以水平和垂直方向各有 4 條線，因此有 8 個命名，並且縱向的第2根網格線有兩個名稱。

DEMO 2-4

2.5 最大和最小網格軌道(Minimum and Maximum Grid Track Sizes)

minmax()函式可以接受 2 個引數，第一個參數列示最小值，第二個參數列示最大值。除了設定固定長度外，值還可以設定為auto，允許軌道根據內容的大小延長或拉伸。

但要注意的是，最小值不能是一個Flexible Lengths單位，例如fr。

.container {
  display: grid;
  grid-template-rows: minmax(100px, auto);
  grid-template-columns: minmax(auto, 50%) 1fr 50px;
}
複製程式碼

在本例中：
建立了1行3列的網格佈局。
第1行最小行高：100px，最大行高：auto，允許高度隨內容而增長。
第1列寬度：auto，但最大不超過50%；第2列寬度：1fr；第3列寬度：50px。

DEMO 2-5

3. 隱式網格(Implicit Grid)

顯示網格和隱式網格，在網格佈局中是個十分重要的概念。

當網格項被放置在顯示網格之外時，就會建立隱式網格。將自動生額外軌道的（空）網格軌道，把沒有顯式放置的網格項放入其中，此時對應的網格軌道和網格項，也就稱為隱式網格軌道、隱式網格項。最直白的解釋就是，沒有使用grid-template-rows、grid-template-columns、grid-template-area屬性定義過的行和列。

3.1 隱式網格軌道大小(Track Sizes)

使用grid-auto-rows、grid-auto-columns屬性，可以定義隱式網格軌道的行高、列寬，如果不設定它們的值，則和顯示網格一樣，大小由自身內容而定。

.container {
    display: grid;
    grid-template-rows: 50px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 100px;
}
複製程式碼

在本例中：
為了更好辨認，結構上去除了1個網格項，現在只有8個。
然後，建立了個1行3列的顯示網格，第1行高度為 50px 但只夠放置 item-1、2、3 這三個網格項。
那麼剩餘的 item-4、5、6、7、8，將被放入自動建立的額外軌道（隱式網格軌道）內，成為隱式網格項，隱式網格軌道的行高根據定義為 100px。

注：由此示例可以發現，隱式網格並非單純指類似指最後個空的網格項，也包含已被填充的網格項，即未被顯示放置的所有網項。

DEMO 3-1

3.2 隱式網格項排列(Item Direction)

使用grid-auto-flow屬性，可以控制隱式網格項的放置（排列）方式。預設row，但也可以設定 column。

.container {
    display: grid;
    grid-template-columns: 100px 150px;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
}
複製程式碼

在本例中：
建立了2列顯示網格軌道，分別放置了 item-1、2 兩個網格項。並設定了隱式網格軌道列寬為 1fr，放置順序為縱向排列。

DEMO 3-2

4. 重複網格軌道(Repeating Grid Tracks)

如果我們要建立N個同樣大小的網格軌道，按照之前的寫法就需要寫N次才行，使用repeat()就可以非常方便的簡化這個操作。

4.1 基本示例(Basic Example)

repeat()函式可以接受兩個引數，第一個參數列示重複次數，第二個參數列示重複的值。

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
}
複製程式碼

在本例中：
定義了行高為100px並重復3次，定義了列寬為1fr並重復3次。
如果按照常規寫法，行高和列寬的值分別要寫成100px, 100px, 100px和1fr, 1fr, 1fr。

DEMO 4-1

4.2 擴充套件示例(Extended Example)

repeat()第二個引數還可以定義多個值，與其他長度單位一起使用，組成特定規則來使用。

.container {
  display: grid;
  grid-template-columns: 50px repeat(2, 30px 1fr) 50px;
}
複製程式碼

在本例中：
前後軌道列寬各為50px，中間根據所定的repeat()規則進行重複佈局。

DEMO 4-2

4.3 auto-fill關鍵字(auto-fill Keyword)

auto-fill為自動填充模式。如果不想把軌道數量定死，想據容器的寬度來自動填充（實現自適應佈局），在可用空間內儘可能容納多的軌道，防止網格項溢位容器，就需要用到該關鍵字（接近 float 佈局模式）。

注：同時還有一種填充方式auto-fit，兩者關係較為特殊，此處暫不擴充套件闡述。可以檢視auto-fill vs auto-fit示例進行對比。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
複製程式碼

在本例中：
由於我們網格容器整體寬度為500px，並定義了每個列寬為100px，所以自動填充了5列，超出部分自動換行。

DEMO 4-3

5. 網格間隔(Grid Gaps)

水渠（間隔）大小可以是任何非負數的px,%,em等長度值，用於分割軌道。

5.1 基本示例(Basic Example)

grid-row-gap、grid-column-gap屬性，用於設定橫向/縱向軌道間的間隔，也就是行間距和列間距。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 40px;
  grid-column-gap: 20px;
}
複製程式碼

在本例中：
行間距為40px，列間距為20px。

DEMO 5-1

5.2 屬性簡寫-雙值(Shorthand Property - Two value)

grid-gap是grid-row-gap和grid-column-gap的簡寫屬性語法，第一個值表示行間距，第二個值表示列間距。

注：新標準中，間隔屬性的 grid- 字首被移除（grid-row-gap => row-gap，grid-column-gap => column-gap，grid-gap => gap），Chrome 68、Safari 11.2 Release 50 和 Opera 54 已經支援無字首的屬性。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 40px 20px;
}
複製程式碼

在本例中：
等價於grid-row-gap: 40px; grid-column-gap: 20px;。

DEMO 5-2

5.3 屬性簡寫-單值(Shorthand Property - One value)

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}
複製程式碼

在本例中：
如果只寫一個值，則表示行間距與列間距為都20px，等價於grid-gap: 20px 20px;，類似 border-width 的簡寫屬性語法。

DEMO 5-3

6. 網格定位(Positioning Items)

6.1 根據網格線定位(Items by Grid Lines)

網格項可以根據網格線序號和網格線名稱來指定其所在容器內的位置。

grid-row-start和grid-column-start分別表示水平網格線的起始位置和垂直網格線的起始位置。

grid-row-end、grid-column-end分別表示水平網格線的結束位置和垂直網格線的結束位置。

6.1-1 根據編號(by Number)

每根網格線從起始位開始到結束位，都會有一個自增長的編號，類似ID。

同一軸線方向，只指定單個位置時，預設為跨單個（行/列）軌道，類似“移動”。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.item-1 {
  grid-row-start: 2;
  grid-column-end: 3;
}
複製程式碼

在本例中：
item-1橫軸向下移動到第 2 根網格線(line-2)位置，縱軸向右移動到第 3 根網格線(line-3)位置結束。
即：橫向移動 1 個軌道，縱向移動 1 個軌道。

DEMO 6.1-1

6.1-2 根據名稱(by Name)

網格項使用網格線名稱定位，相比網格線編號更語義化，在複雜網格內，更方便呼叫。

.container {
  display: grid;
  grid-template-rows: [row-line-1] 1fr [row-line-2] 1fr [row-line-3] 1fr [row-line-4];
  grid-template-columns: [col-line-1] 1fr [col-line-2] 1fr [col-line-3] 1fr [col-line-4];
}
.item-1 {
  grid-row-start: row-line-2;
  grid-column-end: col-line-3;
}
複製程式碼

在本例中：
使用網格線名稱代替了網格線編號，通過合理的命名規範，更容易理解。同樣也可以使用grid-row屬性來簡寫。

DEMO 6.1-2

6.1-3 跨越軌道(Across The Tracks)

同一軸線方向，分別指定起始和結束位置時，可以跨越多個（行/列）軌道，類似“移動併合並”。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.item-1 {
  grid-row-start: 3;
  grid-row-end: 5;
  grid-column-start: 2;
  grid-column-end: 4;
}
複製程式碼

在本例中：
item-1所佔空間為左起第 3 根線到第 5 根線，上起第 2 根線到第 4 根線。
即：item-1 偏移並佔據到，橫向 3 和 4 軌道，縱向的 2 和 3 軌道。

DEMO 6.1-3

6.1-4 span關鍵字(span Keyword)

span關鍵詞表示跨越/跨度的意思。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.item-1 {
  grid-row: 3 / span 2;
  grid-column: 2 / span 2;
}
複製程式碼

在本例中：
span表示第一根線的位置。即，軌道行：第 3 根線開始，往後跨越 2 根線；軌道列：第 2 根線開始，往後跨越 2 根線。

DEMO 6.1-4

6.1-5 簡寫(Shorthand Property)

grid-row是grid-row-start和grid-row-end的簡寫屬性語法。

grid-column是grid-column-start和grid-column-end的簡寫屬性語法。

注：如果有 2 個值，那麼值與值之間必須用/隔開。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.item-1 {
  grid-row: 3 / 5;
  grid-column: 2 / 4;
}
複製程式碼

在本例中：
同上個示例一樣，只是簡化了語法。

DEMO 6.1-5

6.2 根據網格區域定位(Items by Grid Areas)

網格項除了使用網格線名稱、網格線編號，也可以根據網格區域來定位。

6.2-1 根據編號((by Number)

grid-area屬性，是grid-row-start、grid-column-start、grid-row-end、grid-column-end的簡寫屬性語法。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.item-1 {
  grid-area: 3 / 2 / 5 / 4;
}
複製程式碼

在本例中：
和網格線定位一樣，實現了 item-1 佔據4個單元格，並移動到最後。

DEMO 6.2-1

6.2-2 根據名稱(by Name)

與網格線一樣，網格區域可以使用grid-template-areas屬性，給網格區域命名。

同一行命名用單引號或雙引號包裹起來，名稱間用空格隔開（有點類似 markdown 的表格繪製）。然後就可以根據，所建立的區域名稱，指定網格項所在軌道的位置。

注：每個區域的起始網格線會自動命名為區域名-start，結束網格線會自動命名為區域名-end。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "header header header"
                       "main   main   sidebar"
                       "footer footer footer";
}
.item-1 {
  grid-area: header;

  /* 等價於 */
  grid-row:    footer;
  grid-column: footer;

  /* 等價於 */
  grid-row-start:    header;
  grid-row-end:      header;
  grid-column-start: header;
  grid-column-end:   header;
}
.item-2 {
  grid-area: main;
}
.item-3 {
  grid-area: sidebar;
}
.item-4 {
  grid-area: footer;
}
複製程式碼

在本例中：
網格項改為4個，分別對應header、main、sidebar、footer四個區域，通過grid-area指定引用的區域名稱。現在，一個常規網頁佈局已經完成。

DEMO 6.2-2

6.2-3 空單元格(Null Cell)

如果要改變下網格結構，例如header兩邊需要留空，則可以使用.號，代表一個單元格，屬於隱式網格(Implicit Grid)。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: ". header ..."
                       "main   main   sidebar"
                       "footer footer footer";
}
.item-1 {
  grid-area: header;
}
.item-2 {
  grid-area: main;
}
.item-3 {
  grid-area: sidebar;
}
.item-4 {
  grid-area: footer;
}
複製程式碼

在本例中：
網格項改為5個，並且不定義 item-5 的位置。
header區域的兩邊使用.進行單元格佔位，...因為之間沒有空格等同於.，還是一個獨立的單元格，並表示該軌道的單元格沒有被使用（佔位留空）。
但如果有多餘未分配的網格項，且未做處理則會自動填充進空位。

DEMO 6.2-3

7 網格項放置演算法(Items Placement Algorithm)

7.1 遇到問題(Problems)

在不設定網格項定位的時候，網格項會通常會規則、緊密的排列在一起。可一但設定過定位（試圖跨越軌道），後續網格項會進入新的軌道項進行排序，從而導致佈局看起來層次不齊。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.item-1 {
  grid-column: 1 / 3;
}
.item-2 {
  grid-column: 1;
}
.item-3 {
  grid-column: 1 / 3;
}
複製程式碼

在本例中：
可以看到，雖然 item-2、3 但設定了網格項定位之後，導致了第二、第三行結尾處出現“空網格項”。

DEMO 7-1

7.2 dense關鍵字(dense Keyword)

dense關鍵字，則會自動嘗試讓剩餘的網格項，優先填充至空網格項中。

注：dense會引起網格項的不規則排序，並且是根據軌道大小進行填充。可以嘗試下將 item-1 寬度設定為width: 600px看看會有什麼效果。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: dense;
}
.item-1 {
  grid-column: 1 / 3;
}
.item-2 {
  grid-column: 1;
}
.item-3 {
  grid-column: 1 / 3;
}
複製程式碼

在本例中：
表示根據“先行後列”的規則進行填充，並儘可能的緊密填滿。也可以寫成row dense column dense，官方語法為grid-auto-flow: [ row | column ] || dense。

DEMO 7-2

7.3 網格專案分層(Layering)

網格項在必要時可以結合z-index進行分層/堆疊，針對顯示/隱式網格線定位、網格區域定位都有效果。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.item-1,
.item-2 {
  grid-row-start:  1;
  grid-column-end: span 2;
}
.item-1 {
  background: rgba(234,42,122,.5);
  grid-column-start: 1;
  z-index: 1;
}
.item-2 {
  grid-column-start: 2
}
複製程式碼

在本例中：
item-1 和 item-2 都設定為跨越 2 個軌道，並且兩者進行了重疊。在預設情況下 item-2 會覆蓋在 item-1 之上，此時通過z-index進行層級定位。

DEMO 7-3

8. 網格對齊(Grid Alignment)

CSS Grid 允許專案縱軸和橫軸進行對齊。

HTML文件中行，行內元素的預設方向是從左到右，塊級元素預設方向是從上到下。為了便於理解，直接用橫(X)軸表示行，縱(Y)軸表示塊塊。

8.1 網格容器的對齊(Aligning The Grid)

網格容器的對齊屬性，主要有以下幾種值：

normal: 預設值，正常對齊
start: 軸線的起始位置
end: 軸線的結束位置
center: 水平居中
stretch: 自動拉伸，適應容器大小
space-around: 平均分佈，兩端間隔是相鄰元素間隔的一半
space-between: 平均分佈，兩端對齊
space-evenly: 均勻分佈，軌道間隔相等

8.1-1 縱軸對齊(align-items)

align-items屬性，控制網格項在當前行的縱軸方向上的對齊方式。

/* 語法 */
align-items: center | start | end | stretch
複製程式碼

8.1-2 橫軸對齊(justify-items)

justify-items屬性，控制網格項在當前行的橫軸方向上的對齊方式。

/* 語法 */
justify-items: center | start | end | stretch
複製程式碼

8.1-3 屬性簡寫(place-items)

place-items屬性，是align-items、justify-items屬性的簡寫屬性語法。

/* 語法 */
place-items: <align-items> / <justify-items>
複製程式碼

8.1-3 子元素縱軸對齊(align-content)

align-content屬性，控制子元素在縱軸方向上的對齊方式。

/* 語法 */
align-content: center | start | end | space-between | space-around | space-evenly
複製程式碼

8.1-3 子元素橫軸對齊(justify-content)

justify-content屬性，控制子元素在橫軸方向上的對齊方式。

/* 語法 */
justify-content: center | start | end | space-between | space-around | space-evenly
複製程式碼

8.1-3 屬性簡寫(place-content)

place-content屬性，是align-content、justify-content屬性的簡寫屬性語法。

/* 語法 */
place-content: <align-content> / <justify-content>
複製程式碼

8.2 網格項的對齊(Aligning The Grid Items)

網各項的對齊屬性，主要有以下幾種值：

normal: 預設值，正常對齊
start: 軸線的起始位置
end: 軸線的結束位置
center: 水平居中
stretch: 自動拉伸，適應網格項大小

8.2-1 縱軸對齊(align-self)

align-self屬性，控制網格項在縱軸（側軸）方向上的對齊方式。

/* 語法 */
align-self: center | start | end | stretch
複製程式碼

8.2-2 橫軸對齊(justify-self)

justify-self屬性，控制網格項在橫軸（主軸）方向上的對齊方式。

/* 語法 */
justify-self: stretch | start | end | center
複製程式碼

8.2-3 屬性簡寫(place-self)

place-self屬性，是align-self、justify-self屬性的簡寫屬性語法。

/* 語法 */
place-self: <align-self> / <justify-self>;
複製程式碼

9. 佈局屬性簡寫(Shorthand Property)

9.1 網格佈局(grid-template)

grid-template是grid-template-columns、grid-template-rows、grid-template-areas的簡寫屬性語法。

注：grid-template不會重置隱式網格(Implicit Grid)屬性grid-auto-columns、grid-auto-rows、grid-auto-flow，所以大部分情況下還是建議使用grid來代 grid-template。

grid-template: 20vh 1fr 20vh / 15vw 1fr 10vw;

/* 等價於 */
grid-template-rows: 20vh 1fr 20vh;
grid-template-columns: 15vw 1fr 10vw;
grid-template-areas: none; /* 預設值 */
複製程式碼

9.2 網格佈局(grid)

grid是grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow的簡寫屬性語法。

grid: auto-flow 20vh / repeat(3, 30vw);

/* 等價於 */
grid-template-rows: auto-flow 20vh;
grid-template-columns: repeat(3, 30vw);
grid-template-areas: none; /* 預設值 */
grid-column-gap: 0; /* 預設值 */
grid-row-gap: 0; /* 預設值 */
複製程式碼

四、相容性(Browser Support)

桌面(Desktop) 瀏覽器

Chrome	Firefox	IE	Edge	Safari	Opera
57.0	52.0	10(舊語法規範)	16.0	10.1	44

手機(Mobile) / 平板(Tablet)瀏覽器

iOS Safari	Android Browser	Chrome for Android
10.3	67	71

其實最早提出 CSS Grid 的是微軟，基於微軟的尿性，其他瀏覽器的相容性反而比 IE 更快。

五、參考資料(Reference Materials)

Learn CSS Grid - by Jonathan Suh
A Complete Guide to Grid - by Chris House
CSS Grid Tutorial - by Quackit
A Complete Guide to CSS Grid - by Codrops
CSS Grid Layout - by MDN
Grid 佈局教程 - by 阮一峰

六、補充(PS)

文字作為自學筆記，已同步至Github - Ublue前端手記。
文章內容不定期更新，Github 上單篇文章 URL 後期可能有所調整，收藏請點 star 關注倉庫。

CSS文字：layout-grid(轉)
2007-08-15
CSS
CSS文字：layout-grid-line(轉)
2007-08-15
CSS
CSS Grid佈局指南
2016-04-10
CSS
css layout
2015-02-27
CSS
CSS 中的 Grid 佈局完全指南
2019-04-06
CSS
CSS Grid 網格佈局教程
2019-03-25
CSS
進擊的佈局之Grid Layout
2019-03-28
使用vue實現grid-layout功能
2018-01-05
Vue
css26 CSS Layout - The display Property
2024-06-01
CSS
CSS文字：layout-flow(轉)
2007-08-15
CSS
ABAP FM: REUSE_ALV_GRID_LAYOUT_INFO_GET
2007-05-15
【圖片版】CSS網格佈局（Grid）完全教程
2019-03-01
CSS
css grid 佈局
2018-08-22
CSS
css grid佈局
2017-12-19
CSS
css27 CSS Layout - width and max-width
2024-06-01
CSS
css32 CSS Layout - display: inline-block
2024-06-01
CSSS3inlineBloC
Weex-iOS原始碼-CSS Layout 分析
2019-02-19
iOS原始碼CSS
SAP UI5 sap.ui.layout.Grid 控制元件概述
2022-09-26
UI控制元件
研究了下Houdini中的CSS Layout API
2020-12-14
CSSAPI
【CSS】Grid 佈局總結
2019-02-16
CSS
邊學邊玩CSS Grid
2018-08-12
CSS
CSS：玩轉grid佈局
2018-07-13
CSS
ionic-CSS：Grid(網格)
2017-01-12
CSS
CSS Grid 網格佈局
2017-08-14
CSS
[翻譯] Grid 佈局完全指南
2019-02-23
如何快速學習 CSS Grid 佈局 - 相關資源和教程推薦
2017-12-12
CSS
CSS grid佈局好文推薦
2018-07-29
CSS
翻譯 | CSS網格（CSS Grid）佈局入門
2017-05-09
CSS
SAP UI5 Form 表單的 Responsive Grid Layout 佈局中的 breakpoint
2022-09-17
UIORM
javacv教程文件手冊開發指南匯總篇
2020-08-25
Java
Bulma 教程，Bulma 指南，Bulma 實戰，Bulma 中文手冊
2017-10-24
Xamarin 學習筆記 - Layout（佈局）
2018-07-18
筆記
CSS Grid 系列(下)-使用Grid佈局構建網站首頁
2018-01-23
CSS網站
Chrome 開發者工具裡的 CSS grid editor
2021-10-02
ChromeCSS
CSS Grid實現聖盃佈局
2018-03-29
CSS
IE CSS Bug系列：有layout的元素無法浮動
2013-11-13
CSS
ui-grid入門教程（二）
2016-05-20
UI
手動刪除 oracle 的 GRID
2015-11-12
Oracle