【圖片版】學習CSS網格佈局

bluepeach發表於2021-09-09

簡言

CSS網格佈局(Grid)是一套二維的頁面佈局系統,它的出現將完全顛覆頁面佈局的傳統方式。傳統的CSS頁面佈局 一直不夠理想。包括table佈局、浮動、定位及內聯塊等方式,從本質上都是Hack的方式,並且遺漏了一些重要的功能(比如:垂直居中)。Flexbox的出現部分解決了上述問題,但Flex佈局是為了解決簡單的一維佈局,適用於頁面區域性佈局。而Grid天然就是為了解決複雜的二維佈局而出現的,適用頁面的整體佈局。在實際工作中,Grid和Flexbox不但不矛盾,而且還能很好的結合使用。做為WEB程式設計師,我們在頁面佈局問題上都付出過努力,也將不斷探索新的方案。而Grid是第一個專門為佈局問題而生的CSS模組,我們有理由對Grid充滿期待。

本文包括18個小節,62個例項,完整閱讀需要時間20分鐘以上。

為了獲得最佳的閱體驗,可以訪問如下格式的教程:

1 網格容器

將屬性 display 值設為 gridinline-grid 就建立了一個網格容器,所有容器直接子結點自動成為網格專案。

1.1 例1

grid  {    display: grid;
}

網格專案按行排列,網格專案佔用整個容器的寬度。

圖片描述

網格容器演示1

1.1 例2

grid  {    display: inline-grid;
}

網格專案按行排列,網格專案寬度由自身寬度決定。

圖片描述

網格容器演示2

2 顯示網格

屬性grid-template-rowsgrid-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-gapgrid-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-gapgrid-row-gapgrid-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-endgrid-column-end的定義可以省略。

圖片描述

用網格線編號定位專案演示1

6.2 例14

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

屬性grid-rowgrid-row-startgrid-row-end的簡寫形式。

屬性grid-columngrid-column-startgrid-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-areagrid-row-start, grid-column-start, grid-row-endgrid-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-startgrid-column-end屬性值的設定,使該網格專案跨越多列。

圖片描述

網格專案跨越行列演示1

7.2 例17

.item1 {    grid-row-start: 1;    grid-row-end:   4;
}

透過grid-row-startgrid-row-end屬性值的設定,使該網格專案跨越多行。

圖片描述

網格專案跨越行列演示2

7.3 例18

.item1 {    grid-row:    2 / 5;    grid-column: 2 / 4;
}

簡寫屬性 grid-rowgrid-column 即能用來定位專案,也能用來使專案跨越多個行列。

圖片描述

網格專案跨越行列演示1

7.4 例19

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

關鍵字 span 用來指定跨越行或列的數量。

圖片描述

網格專案跨越行列演示1

8 網格線命名

當利用屬性grid-template-rowsgrid-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-rowsgrid-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-rowgrid-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-rowgrid-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-startinner-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-itemsjustify-self 以行軸為參照對齊專案,屬性align-itemsalign-self 以列軸為參照對齊專案。

屬性justify-itemsalign-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/,如需轉載,請註明出處,否則將追究法律責任。

相關文章