【圖片版】學習CSS網格佈局
簡言
CSS網格佈局(Grid)是一套二維的頁面佈局系統,它的出現將完全顛覆頁面佈局的傳統方式。傳統的CSS頁面佈局 一直不夠理想。包括table佈局、浮動、定位及內聯塊等方式,從本質上都是Hack的方式,並且遺漏了一些重要的功能(比如:垂直居中)。Flexbox的出現部分解決了上述問題,但Flex佈局是為了解決簡單的一維佈局,適用於頁面區域性佈局。而Grid天然就是為了解決複雜的二維佈局而出現的,適用頁面的整體佈局。在實際工作中,Grid和Flexbox不但不矛盾,而且還能很好的結合使用。做為WEB程式設計師,我們在頁面佈局問題上都付出過努力,也將不斷探索新的方案。而Grid是第一個專門為佈局問題而生的CSS模組,我們有理由對Grid充滿期待。
本文包括18個小節,62個例項,完整閱讀需要時間20分鐘以上。
為了獲得最佳的閱體驗,可以訪問如下格式的教程:
1 網格容器
將屬性 display
值設為 grid
或 inline-grid
就建立了一個網格容器,所有容器直接子結點自動成為網格專案。
1.1 例1
grid { display: grid; }
網格專案按行排列,網格專案佔用整個容器的寬度。
網格容器演示1
1.1 例2
grid { display: inline-grid; }
網格專案按行排列,網格專案寬度由自身寬度決定。
網格容器演示2
2 顯示網格
屬性grid-template-rows
和grid-template-columns
用於顯示定義網格,分別用於定義行軌道和列軌道。
2.1 例3
grid { display: grid; grid-template-rows: 50px 100px; }
屬性grid-template-rows
用於定義行的尺寸,即軌道尺寸。軌道尺寸可以是任何非負的長度值(px,%,em,等)
網格專案1的行高是50px,網格專案2的行高是100px。
因為只定義了兩個行高,網格專案3和4的行高取決於其本身的高度。
顯示網格演示1
2.2 例4
grid { display: grid; grid-template-columns: 90px 50px 120px; }
類似於行的定義,屬性grid-template-columns
用於定義列的尺寸。
因為定義中只有三列,所以專案4,5,6排在新的一行; 並因為它們位於第1,2,3列的軌道上,所以其寬度等於定義中第1,2,3列軌道的寬度。
網格專案的第1列,第2列,第3列的寬度分別是 90px, 50px 和 120px 。
顯示網格演示2
2.3 例5
grid { display: grid; grid-template-columns: 1fr 1fr 2fr; }
單位fr
用於表示軌道尺寸配額,表示按配額比例分配可用空間。
本例中,專案1佔 1/4 寬度,專案2佔 1/4 寬度,專案3佔 1/2 寬度。
顯示網格演示3
2.4 例6
grid { display: grid; grid-template-columns: 3rem 25% 1fr 2fr; }
單位fr
和其它長度單位混合使用時,fr
的計算基於其它單位分配後的剩餘空間。
本例中,1fr = (容器寬度 - 3rem - 容器寬度的25%) / 3
顯示網格演示4
3 軌道的最小最大尺寸設定
函式minmax()
用於定義軌道最小/最大邊界值。
3.1 例7
grid { display: grid; grid-template-rows: minmax(100px, auto); grid-template-columns: minmax(auto, 50%) 1fr 3em; }
函式minmax()
接收兩個引數:第一個參數列示最小軌道尺寸,第二個參數列示最大軌道尺寸。長度值可以是auto,表示軌道尺寸可以根據內容大小進行伸長或收縮。
本例中,第一行最小高度設定成100px,但是最大高度設定成auto
,表示行高可以根據內容伸長超過100px。
本例中,第一列寬度的最大值設定成50%,表示其寬度不能超過整個容器寬度的50%。
軌道的最小最大尺寸設定演示1
4 重複的網格軌道
函式repeat()
用來定義重複的網格軌道,尤其適用於有多個相同專案的情況下。
4.1 例8
grid { display: grid; grid-template-rows: repeat(4, 100px); grid-template-columns: repeat(3, 1fr); }
函式repeat()
接收兩個引數:第一個參數列示重複的次數,第二個參數列示軌道尺寸。
重複的網格軌道演示1
4.2 例9
grid { display: grid; grid-template-columns: 30px repeat(3, 1fr) 30px; }
函式repeat()
可以用在軌道定義列表當中。
本例中,第1列和第5列的寬度是30px。函式repeat()
建立了中間3列,每一列寬度都是1fr
。
重複的網格軌道演示2
5 定義網格間隙
屬性grid-column-gap
和 grid-row-gap
用於定義網格間隙。
網格間隙只建立在行列之間,專案與邊界之間無間隙。
5.1 例10
grid { display: grid; grid-row-gap: 20px; grid-column-gap: 5rem; }
間隙尺寸可以是任何非負的長度值(px,%,em等)。
定義網格間隙演示1
5.2 例11
grid { display: grid; grid-gap: 100px 1em; }
屬性grid-gap
是grid-row-gap
和grid-column-gap
的簡寫形式。
第一個值表示行間隙,第二個值表示列間隙。
定義網格間隙演示2
5.3 例12
grid { display: grid; grid-gap: 2rem; }
如只有一個值,則其即表示行間隙,也表示列間隙。
定義網格間隙演示3
6 用網格線編號定位專案
網格線本質上是用來表示網格軌道的開始和結束。
每一條網格線編號都以1開始,以1為步長向前編號,其中包括行列兩組網格線。
6.1 例13
.item1 { grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 3; }
這是一個3行2列的網格,即在行上有4條網格線,在列上有3條網格線。專案1利用網格線編號定位在第2行第2列的位置上。
本例中,專案只跨越一行一列,則grid-row-end
和grid-column-end
的定義可以省略。
用網格線編號定位專案演示1
6.2 例14
.item1 { grid-row: 2; grid-column: 3 / 4; }
屬性grid-row
是 grid-row-start
和 grid-row-end
的簡寫形式。
屬性grid-column
是 grid-column-start
和 grid-column-end
的簡寫形式。
如果只指定一個值,它表示 grid-row/column-start
。
如果兩個值都指定,第一個表示 grid-row/column-start
,第二個值表示grid-row/column-end
。而且你必須用斜槓(/)分隔這兩個值。
用網格線編號定位專案演示2
6.3 例15
.item1 { grid-area: 2 / 2 / 3 / 3; }
屬性grid-area
是 grid-row-start
, grid-column-start
, grid-row-end
和 grid-column-end
的簡寫形式。
如果四個值都指定,則第一個表示 grid-row-start
, 第二個表示 grid-column-start
, 第三個表示 grid-row-end
,第四個表示 grid-column-end
。
用網格線編號定位專案演示3
7 網格專案跨越行列
網格專案預設都佔用一行和一列,但可以使用前一節中定位專案的屬性來指定專案跨越多行或多列。
7.1 例16
.item1 { grid-column-start: 1; grid-column-end: 4; }
透過grid-column-start
和grid-column-end
屬性值的設定,使該網格專案跨越多列。
網格專案跨越行列演示1
7.2 例17
.item1 { grid-row-start: 1; grid-row-end: 4; }
透過grid-row-start
和grid-row-end
屬性值的設定,使該網格專案跨越多行。
網格專案跨越行列演示2
7.3 例18
.item1 { grid-row: 2 / 5; grid-column: 2 / 4; }
簡寫屬性 grid-row
和 grid-column
即能用來定位專案,也能用來使專案跨越多個行列。
網格專案跨越行列演示1
7.4 例19
.item1 { grid-row: 2 / span 3; grid-column: span 2; }
關鍵字 span
用來指定跨越行或列的數量。
網格專案跨越行列演示1
8 網格線命名
當利用屬性grid-template-rows
和 grid-template-columns
定義網格時,可以同時定義網格線的名稱。網格線名稱可以用於定位網格專案。
8.1 例20
grid { display: grid; grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end]; grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end]; }
用屬性grid-template-rows
和 grid-template-columns
定義網格,同時定義網格線名稱。
為避免混淆,網格線名稱應避免使用規範中的關鍵字(span
等)。
定義網格線名稱的方法是要將其放在中括號內([name-of-line]
),並要和網格軌道相對應。
網格線命名演示1
8.2 例21
grid { display: grid; grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end]; grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end]; }
可以給同一網格線定義多個名稱,方法就是在中括號內用空格將多個名稱分開。
每一個網格線名都可以被引用,以用來定位網格專案。
網格線命名演示2
9 用網格線名定位專案
利用命名的網格線,可以很方便地進行專案定位。
9.1 例22
.item1 { grid-row-start: row-2-start; grid-row-end: row-end; grid-column-start: col-2-start; grid-column-end: col-end; }
引用網格線名稱不用加中括號。
用網格線名定位專案演示1
9.2 例23
.item1 { grid-row: row-2-start / row-end; grid-column: col-2-start / col-end; }
簡寫屬性grid-row
和 grid-column
也可以利用網格線名稱來定位專案。
用網格線名定位專案演示2
10 用同名網格線命名和定位專案
函式repeat()
可以定義同名網格線。這節省了給每條網格都命名的時間。
10.1 例24
grid { display: grid; grid-template-rows: repeat(3, [row-start] 1fr [row-end]); grid-template-columns: repeat(3, [col-start] 1fr [col-end]); }
函式repeat()
可以用來定義同名網格線。 這樣多個網格線擁有相同的名字。
同名網格線會被分配一個位置編號,做為其唯一標識。
用同名網格線命名和定位專案演示1
10.2 例25
.item1 { grid-row: row-start 2 / row-end 3; grid-column: col-start / col-start 3; }
用同名網格線來定位專案時,應注意在網格線名稱和編號之間有一個空格。
本例中,專案1的行定位開始於第2條名稱是row-start
的網格線,結束於第3條名稱是row-end
的網格線;列定位開始於第1條名稱是col-start
的網格線,結束於第3條名稱是col-start
的網格線。
用同名網格線命名和定位專案演示2
11 用網格區域命名和定位專案
如同網格線命名,可以用屬性grid-template-areas
給網格區域命名。網格區域名稱可以用來定位網格專案。
11.1 例26
grid { display: grid; grid-template-areas: "header header" "content sidebar" "footer footer"; grid-template-rows: 150px 1fr 100px; grid-template-columns: 1fr 200px; }
一組區域名稱要放在單引號或雙引號內,每一個名稱之間以空格分隔。
每一組名稱定義一行,每一個名稱定義一列。
用網格區域命名和定位專案演示1
11.2 例27
header { grid-row-start: header; grid-row-end: header; grid-column-start: header; grid-column-end: header; }
網格區域名稱可以用在屬性grid-row-start
, grid-row-end
, grid-column-start
, 和 grid-column-end
的值中,用來定位專案。
用網格區域命名和定位專案演示2
11.3 例28
footer { grid-row: footer; grid-column: footer; }
網格區域名稱也可以用於簡寫屬性grid-row
和 grid-column
的值中。
用網格區域命名和定位專案演示3
11.4 例29
aside { grid-area: sidebar; }
網格區域名稱也可以用於簡寫屬性grid-area
的值中。
用網格區域命名和定位專案演示4
12 隱式網格
隱式網格用來在顯式網格之外定位專案。有時在顯示網格中沒有足夠的空間,或者是要在顯示網格之外定位專案就要用到隱式網格。這時可以把這些專案放置在隱式網格中。
隱式網格可以透過屬性 grid-auto-rows
, grid-auto-columns
, 和 grid-auto-flow
來定義。
12.1 例30
grid { display : grid; grid-template-rows: 70px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
本例中,只定一個行軌道,因此專案 1 和 2 高 70px 。
第2行軌道有隱式網格自動建立併為專案 3 和 4 分配了空間。 屬性grid-auto-rows
定義了隱式網格的行軌道尺寸,即專案3和4的高度是 140px 。
隱式網格演示1
12.2 例31
grid { display : grid; grid-auto-flow: row; }
預設的網格佈局方向是行的方向(row
)。
隱式網格演示2
12.3 例32
grid { display : grid; grid-auto-flow: column; }
網格的佈局方向可以定義為列的方向(column)。
隱式網格演示3
12.4 例33
grid { display : grid; grid-template-columns: 30px 60px; grid-auto-flow: column; grid-auto-columns: 1fr; }
本例中,我們只定義了兩個列軌道的尺寸30px 和 60px。
隱式網格中自動建立其它列並給專案3,4,5分配空間;分配的空間尺寸是透過屬性 grid-auto-columns
定義的。
隱式網格演示4
13 隱式命名的網格區域
網格線名稱可以任意指定,但分配以 -start
和 -end
結尾的名字有額外的益處,這樣隱式地建立了具名網格區域,該名稱可以用於專案定位。
13.1 例34
grid { display : grid; grid-template-rows: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end]; grid-template-columns: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end]; }
本例中,行和列都有名為inner-start
和 inner-end
的網格線,它們隱式地給網格區域分派了名稱(inner
)。
item1 { grid-area: inner; }
這樣我們就能夠直接使用網格區域名來定位,而不需要再用網格線來定位專案了。
隱式命名的網格區域演示1
14 隱式命名的網格線
隱式命名網格線和隱式命名的網格區域的工作原理剛好相反。
14.1 例35
grid { display : grid; grid-template-areas: "header header" "content sidebar" "footer footer"; grid-template-rows: 80px 1fr 40px; grid-template-columns: 1fr 200px; }
定義網格區域時隱式的命名了網格線的名稱。這些網格線的名稱是基於區域名加上-start
或 -end
字尾組成的。
隱式命名的網格線演示1
14.2 例36
item1 { grid-row-start: header-start; grid-row-end: content-start; grid-column-start: footer-start; grid-column-end: sidebar-end; }
本例中,header是透過隱式網格線名稱進行定位的。
隱式命名的網格線演示2
15 層疊網格專案
透過專案定位可以使多個專案層疊在一起,屬性z-index
可以改變層疊專案的層次。
15.1 例37
.item-1, .item-2 { grid-row-start: 1; grid-column-end: span 2; }.item-1 { grid-column-start: 1; z-index: 1; }.item-2 { grid-column-start: 2 }
本例中,專案1 和 2 行定位開始於第1條行網格線,並跨越兩列。
兩個專案都是用網格線編號進行定位。專案1起始於第1條列網格線,專案2起始於第2條列網格線,這使得兩個專案在第一行中間列發生層疊。
預設情況下,專案2將層疊於專案1之上;然而,給專案1設定屬性z-index: 1
就使得專案1層疊於專案2之上。
層疊網格專案演示1
15.2 例38
.overlay { grid-row-start: header-start; grid-row-end: content-end; grid-column-start: content-start; grid-column-end: sidebar-start; z-index: 1; }
本例中,利用在 grid-template-areas
定義中的隱式網格線名稱,定位了一個網格專案(overlay
),並將層疊於上層。
層疊網格專案演示2
16 網格專案的對齊方式
CSS的 補充了CSS網格的內容,網格專案可以按行或列的軸線方向實現多種對齊方式。
屬性justify-items
和 justify-self
以行軸為參照對齊專案,屬性align-items
和 align-self
以列軸為參照對齊專案。
屬性justify-items
和 align-items
是網格容器的屬性,並支援如下這些值:
auto
normal
start
end
center
stretch
baseline
first baseline
last baseline
16.1 例39
.grid { grid-template-rows: 80px 80px; grid-template-columns: 1fr 1fr; grid-template-areas: "content content" "content content"; }.item { grid-area: content }.grid { justify-items: start }
在行的軸線起點處對齊。
網格專案的對齊方式演示1
16.2 例40
grid { justify-items: center; }
在行的軸線中點處對齊。
網格專案的對齊方式演示2
16.3 例41
grid { justify-items: end; }
在行的軸線終點處對齊。
網格專案的對齊方式演示3
16.4 例42
grid { justify-items: stretch; }
在行的軸線方向延伸並填滿整個區域。stretch
是預設值。
網格專案的對齊方式演示4
16.5 例43
grid { align-items: start; }
在列的軸線起點處對齊。
網格專案的對齊方式演示5
16.6 例44
grid { align-items: center; }
在列的軸線中點處對齊。
網格專案的對齊方式演示6
16.7 例45
grid { align-items: end; }
在列的軸線終點處對齊。
網格專案的對齊方式演示7
16.8 例46
grid { align-items: stretch; }
在列的軸線方向延伸並填滿整個區域。
網格專案的對齊方式演示8
16.9 例47
grid { justify-items: center; align-items: center; }
專案定位於行軸和列軸線的中間位置。
網格專案的對齊方式演示9
17 網格專案的對齊方式2
專案可以用屬性align-self 和 justify-self定義自己的對齊方式,並支援如下這些屬性值:
auto
normal
start
end
center
stretch
baseline
first baseline
last baseline
17.1 例48
.item1 { justify-self: start }.item2 { justify-self: center }.item3 { justify-self: end }
屬性justify-self
在行的軸線方向定義對齊方式。
網格專案的對齊方式演示10
17.2 例49
.item1 { align-self: start }.item2 { align-self: center }.item3 { align-self: end }
屬性align-self
在列的軸線方向定義對齊方式。
網格專案的對齊方式演示11
17.3 例50
.item1 { justify-self: center align-self: center }
專案1定位在行的軸線和列的軸線的中間位置。
網格專案的對齊方式演示12
18 網格軌道的對齊方式
在網格容器中,網格軌道延軸線方向有多種對齊方式。
屬性align-content
用於定義網格軌道延著行的軸線的對齊方式,而屬性justify-content
用於定義網格軌道沿著列的軸線的對齊方式。並分別支援如下屬性:
normal
start
end
center
stretch
space-around
space-between
space-evenly
baseline
first baseline
last baseline
18.1 例51
.grid { width: 100%; height: 300px; grid-template-columns: repeat(4, 45px); grid-template-rows: repeat(4, 45px); grid-gap: 0.5em; justify-content: start; }
列的軌道在行的軸線起點處對齊。start
是預設值。
網格軌道的對齊方式演示1
18.2 例52
.grid { justify-content: end; }
列的軌道在行的軸線終點處對齊。
網格軌道的對齊方式演示2
18.3 例53
.grid { justify-content: center; }
列的軌道在行的軸線中間處對齊。
網格軌道的對齊方式演示3
18.4 例54
.grid { justify-content: space-around; }
在每一列的兩側平均分配額外空間。
網格軌道的對齊方式演示4
18.5 例55
.grid { justify-content: space-between; }
在列與列之間平均分配額外的空間。
網格軌道的對齊方式演示5
18.6 例56
.grid { justify-content: space-evenly; }
在列與列之間及列與邊界之間平均分配額外空間。
網格軌道的對齊方式演示6
18.7 例57
.grid { align-content: start; }
行的軌道在列的軸線起點處對齊,屬性start
是預設值。
網格軌道的對齊方式演示7
18.8 例58
.grid { align-content: end; }
行的軌道在列的軸線終點處對齊。
網格軌道的對齊方式演示8
18.9 例59
.grid { align-content: center; }
行的軌道在列的軸線中點處對齊。
網格軌道的對齊方式演示9
18.10 例60
.grid { align-content: space-around; }
每一行的兩側平均分配額外空間。
網格軌道的對齊方式演示10
18.11 例61
.grid { align-content: space-between; }
在行與行之間平均分配額外空間。
網格軌道的對齊方式演示11
18.12 例62
.grid { align-content: space-evenly; }
在行與行之間及行與邊界之間平均分配額外空間。
網格軌道的對齊方式演示12
結語
本教程相對全面地介紹了網格的相關內容,但這並不是一個完整的技術文件。想更全面的學習相關內容,推薦訪問 和 的網格文件。
由於能力有限,翻譯中難免錯誤較多,還請大家多多諒解!
十分感謝原文作者在本文排版設計,示例製作,文字編輯等方面卓越的工作。
為了獲得最佳的閱體驗,請訪問如下排版的教程:
作者:毛三十
連結:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2558/viewspace-2814287/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 【圖片版】CSS網格佈局(Grid)完全教程CSS
- 原生 CSS 網格佈局學習筆記CSS筆記
- 原生CSS網格佈局學習筆記CSS筆記
- CSS網格佈局CSS
- [譯] 使用 CSS 網格佈局實現響應式圖片CSS
- CSS 來佈局圖片CSS
- CSS Grid 網格佈局CSS
- CSS Grid 網格佈局教程CSS
- CSS學習-Flex佈局複習CSSFlex
- css網格佈局的最佳實踐CSS
- css經典佈局學習CSS
- 翻譯 | CSS網格(CSS Grid)佈局入門CSS
- CSS學習筆記:flex佈局CSS筆記Flex
- CSS Grid 網格佈局邊框設定CSS
- 15個CSS網格佈局線上生成器網站CSS網站
- 學習如何用CSS變數建立網頁響應佈局 — css var()CSS變數網頁
- 哈?原來css網格佈局這麼簡單!!!CSS
- CSS Grid 網格佈局實現自適應9宮格CSS
- GridPane網格佈局
- grid網格佈局
- CSS佈局 --- 居中佈局CSS
- css佈局-float佈局CSS
- 網格佈局管理器
- iOS 中使用 FlexBox 佈局實現圖片九宮格iOSFlex
- Qt 學習筆記 - 第二章 - 新增圖片、佈局、介面切換QT筆記
- UIbutton 上下圖片文字佈局UI
- [譯] 簡單的響應式現代 CSS 網格佈局CSS
- CSS實現的網頁柵格佈局簡單介紹CSS網頁
- flex佈局學習Flex
- css九宮格佈局程式碼例項CSS
- 圖解CSS3-flex佈局圖解CSSS3Flex
- 一篇全面的CSS佈局學習指南 [譯]CSS
- web前端學習筆記(CSS固定寬度佈局)Web前端筆記CSS
- 【css】佈局CSS
- css 佈局CSS
- CSS佈局CSS
- Bootstrap系列 -- 10. 網格佈局boot
- CSS 佈局解決方案(終結版)CSS