本文首發於 個人部落格:藍色夢想。
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;
}
複製程式碼
把值設定為inline-grid
就變成了行內元素。
.container {
display: inline-grid;
}
複製程式碼
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 的軌道高度由自身內容而定。
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 的列寬設定。
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
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根網格線有兩個名稱。
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。
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。
注:由此示例可以發現,隱式網格並非單純指類似指最後個空的網格項,也包含已被填充的網格項,即未被顯示放置的所有網項。
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,放置順序為縱向排列。
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
。
4.2 擴充套件示例(Extended Example)
repeat()
第二個引數還可以定義多個值,與其他長度單位一起使用,組成特定規則來使用。
.container {
display: grid;
grid-template-columns: 50px repeat(2, 30px 1fr) 50px;
}
複製程式碼
在本例中:
前後軌道列寬各為50px
,中間根據所定的repeat()
規則進行重複佈局。
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
列,超出部分自動換行。
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
。
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;
。
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 的簡寫屬性語法。
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 個軌道。
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
屬性來簡寫。
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 軌道。
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 根線。
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;
}
複製程式碼
在本例中:
同上個示例一樣,只是簡化了語法。
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個單元格,並移動到最後。
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
指定引用的區域名稱。現在,一個常規網頁佈局已經完成。
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
區域的兩邊使用.
進行單元格佔位,...
因為之間沒有空格等同於.
,還是一個獨立的單元格,並表示該軌道的單元格沒有被使用(佔位留空)。
但如果有多餘未分配的網格項,且未做處理則會自動填充進空位。
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 但設定了網格項定位之後,導致了第二、第三行結尾處出現“空網格項”。
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
。
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
進行層級定位。
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
關注倉庫。