簡言
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](https://i.iter01.com/images/49f4b08a4d41a2669542ec174b20a1486b439740f24bbb205f60586b25367a11.jpg)
1.1 例2
grid {
display: inline-grid;
}
複製程式碼
網格專案按行排列,網格專案寬度由自身寬度決定。
![網格容器演示2](https://i.iter01.com/images/45d83ffedcff5dec00a0690881e5913381b53f7a7e2898de760e6946e2d6cb1d.jpg)
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](https://i.iter01.com/images/39b56c6244cabe5183b956b067937e58a7bb054e97e846269b6d50e0c42c9f2b.jpg)
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](https://i.iter01.com/images/9defad80cbd1dba85b194e2f998c559fbbb134d71f92aa08b8670a40b23518d6.jpg)
2.3 例5
grid {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
}
複製程式碼
單位fr
用於表示軌道尺寸配額,表示按配額比例分配可用空間。
本例中,專案1佔 1/4 寬度,專案2佔 1/4 寬度,專案3佔 1/2 寬度。
![顯示網格演示3](https://i.iter01.com/images/a00d876d7c28b4c79596493fda08c765d224b4804426e44def285aba43ee732a.jpg)
2.4 例6
grid {
display: grid;
grid-template-columns: 3rem 25% 1fr 2fr;
}
複製程式碼
單位fr
和其它長度單位混合使用時,fr
的計算基於其它單位分配後的剩餘空間。
本例中,1fr = (容器寬度 - 3rem - 容器寬度的25%) / 3
![顯示網格演示4](https://i.iter01.com/images/4211e0cba0819eee54ceb6dd89398b104524d35b10e4416d4474d438b2ca3edc.jpg)
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](https://i.iter01.com/images/131925e5728e0eb1717c0ae48ebb63e02041f2e697419d2a3d582455ab9a0e3b.jpg)
4 重複的網格軌道
函式repeat()
用來定義重複的網格軌道,尤其適用於有多個相同專案的情況下。
4.1 例8
grid {
display: grid;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);
}
複製程式碼
函式repeat()
接收兩個引數:第一個參數列示重複的次數,第二個參數列示軌道尺寸。
![重複的網格軌道演示1](https://i.iter01.com/images/1f5a7c1491bc2017ce84bd4be8bdc13b608e67fd48b80b8a3903cbf8e1d7958c.jpg)
4.2 例9
grid {
display: grid;
grid-template-columns: 30px repeat(3, 1fr) 30px;
}
複製程式碼
函式repeat()
可以用在軌道定義列表當中。
本例中,第1列和第5列的寬度是30px。函式repeat()
建立了中間3列,每一列寬度都是1fr
。
![重複的網格軌道演示2](https://i.iter01.com/images/728ee166ad225491fa1b83138fa048291281dd27103bccfeb2b0af79054ab3e9.jpg)
5 定義網格間隙
屬性grid-column-gap
和 grid-row-gap
用於定義網格間隙。
網格間隙只建立在行列之間,專案與邊界之間無間隙。
5.1 例10
grid {
display: grid;
grid-row-gap: 20px;
grid-column-gap: 5rem;
}
複製程式碼
間隙尺寸可以是任何非負的長度值(px,%,em等)。
![定義網格間隙演示1](https://i.iter01.com/images/d6ed5cb18690221214c9b1f8edfc6f4670d8728052731b0b455cabc1e9d38473.jpg)
5.2 例11
grid {
display: grid;
grid-gap: 100px 1em;
}
複製程式碼
屬性grid-gap
是grid-row-gap
和grid-column-gap
的簡寫形式。
第一個值表示行間隙,第二個值表示列間隙。
![定義網格間隙演示2](https://i.iter01.com/images/82018e50f65b9478632c9eda4ef9b438d83e4acca773e48c934b0f8f3afa126f.jpg)
5.3 例12
grid {
display: grid;
grid-gap: 2rem;
}
複製程式碼
如只有一個值,則其即表示行間隙,也表示列間隙。
![定義網格間隙演示3](https://i.iter01.com/images/bbfd1d56620da155e0841fbb5985cf2a552815efabbc1c7a41995a92f2b3ab15.jpg)
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](https://i.iter01.com/images/25ac9b5ae26d6a71e36759164bc2078d96106794f86403d05cc001e07d0538e1.jpg)
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](https://i.iter01.com/images/a83fd36e856b6a665464d6a2d779aa01e7f59d075d45c4e3122f27bbabbb5433.jpg)
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](https://i.iter01.com/images/ea4f111c9a39c77d906031bea715c40ceefc3e738d7b5392641d09d3436c9e42.jpg)
7 網格專案跨越行列
網格專案預設都佔用一行和一列,但可以使用前一節中定位專案的屬性來指定專案跨越多行或多列。
7.1 例16
.item1 {
grid-column-start: 1;
grid-column-end: 4;
}
複製程式碼
通過grid-column-start
和grid-column-end
屬性值的設定,使該網格專案跨越多列。
![網格專案跨越行列演示1](https://i.iter01.com/images/7d1a95bf754b1fa601b2fbdb1021987f5499ede20c4810c7ef237dd471de5f23.jpg)
7.2 例17
.item1 {
grid-row-start: 1;
grid-row-end: 4;
}
複製程式碼
通過grid-row-start
和grid-row-end
屬性值的設定,使該網格專案跨越多行。
![網格專案跨越行列演示2](https://i.iter01.com/images/4bd5acbaeb77f090d6bdb82249441bbea464041dca08d51afbb5056cd5afa74d.jpg)
7.3 例18
.item1 {
grid-row: 2 / 5;
grid-column: 2 / 4;
}
複製程式碼
簡寫屬性 grid-row
和 grid-column
即能用來定位專案,也能用來使專案跨越多個行列。
![網格專案跨越行列演示1](https://i.iter01.com/images/a04c29e3278b37726de7dffac210fc01945a58f84346c1e0aaddf5bd66ca2638.jpg)
7.4 例19
.item1 {
grid-row: 2 / span 3;
grid-column: span 2;
}
複製程式碼
關鍵字 span
用來指定跨越行或列的數量。
![網格專案跨越行列演示1](https://i.iter01.com/images/f4722d0fe05de1c0fa01110034197bf42198cfc6e05a45fc46411e25061821a3.jpg)
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](https://i.iter01.com/images/8d017aef456dc2db3ca9df5e6b51b349d8a430eea2e225aaabbd911a9d99723e.jpg)
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](https://i.iter01.com/images/0422c003ab548565fbf237022c70bd77438bb80ef9ba5529308c6f2516d223f4.jpg)
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](https://i.iter01.com/images/933ae56ff0be5a22bb70e07cd2c93a3befb666b633b4c9e2f8ef51da9a09e15b.jpg)
9.2 例23
.item1 {
grid-row: row-2-start / row-end;
grid-column: col-2-start / col-end;
}
複製程式碼
簡寫屬性grid-row
和 grid-column
也可以利用網格線名稱來定位專案。
![用網格線名定位專案演示2](https://i.iter01.com/images/032d5722b5fd2c892402fa6b5430a462470d7f16615d2c325afb347f95b2173f.jpg)
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](https://i.iter01.com/images/6eaa990ccc5729c2a8f4c12cf7bc0285f7c561ee8857076f4619cac432ef889f.jpg)
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](https://i.iter01.com/images/f8080af7e118790cb5a93165794ab9352986f613ef53c287bd908187e085f715.jpg)
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](https://i.iter01.com/images/03f23cb3ad0467e5cd0525e26085d20f42d8d6305dfd60b32cec2ad0495279bf.jpg)
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](https://i.iter01.com/images/8b628272a924f84fbdc0fd97d6c2e642d82ea8ff32b4566cb2aa81ea5fbf33dc.jpg)
11.3 例28
footer {
grid-row: footer;
grid-column: footer;
}
複製程式碼
網格區域名稱也可以用於簡寫屬性grid-row
和 grid-column
的值中。
![用網格區域命名和定位專案演示3](https://i.iter01.com/images/1597a6bde8dfac9796dc1c679ff4c2b1c6599c2b9ca4c770c33f0cf74cf0ef00.jpg)
11.4 例29
aside {
grid-area: sidebar;
}
複製程式碼
網格區域名稱也可以用於簡寫屬性grid-area
的值中。
![用網格區域命名和定位專案演示4](https://i.iter01.com/images/309a08a11d825b95049783e035eef7e40462c9de12d44437b86dc0792fe2f552.jpg)
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](https://i.iter01.com/images/e2b007b203a40bf713b3a9a6bcfb68e0554633d232288429cff3eb41349e57fe.jpg)
12.2 例31
grid {
display : grid;
grid-auto-flow: row;
}
複製程式碼
預設的網格佈局方向是行的方向(row
)。
![隱式網格演示2](https://i.iter01.com/images/f9cce316d71d67751aaf3de421434ea102e05cbda002fd4a813d463183763eb0.jpg)
12.3 例32
grid {
display : grid;
grid-auto-flow: column;
}
複製程式碼
網格的佈局方向可以定義為列的方向(column)。
![隱式網格演示3](https://i.iter01.com/images/743a8b4b0e0a44e1cfca104c8cd4dded5807cbf5901091b87f248427726e5945.jpg)
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](https://i.iter01.com/images/ccdc8ae2bba2da49371c9e526f2da0c8c9f1f16314abaadbbd3126d7d706149f.jpg)
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](https://i.iter01.com/images/c8675ce3e922fee5066737461687bc3b8e8469c1c7984b013d240b236a1f2ed8.jpg)
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](https://i.iter01.com/images/1a8ad3aabf85861507147c4d19ee42e78f70d85d9fc6b7e0d457922916349d0c.jpg)
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](https://i.iter01.com/images/973039494b064985203494b05c798d633883f80ae80ba8e3ab7ceda21523dea9.jpg)
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](https://i.iter01.com/images/77550495abc13b54dfb65ada8c443663111cade1578526c799dc2e0f915d84ac.jpg)
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](https://i.iter01.com/images/ace08d178b320aa1265d921d02cb37c2ec960fafaf984213e0e438eb4a9d3cf1.jpg)
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](https://i.iter01.com/images/8d2ca13a69f7916808878e9e5bdb963708ff529fb5f0c95c15f0a44bef5f8ac1.jpg)
16.2 例40
grid {
justify-items: center;
}
複製程式碼
在行的軸線中點處對齊。
![網格專案的對齊方式演示2](https://i.iter01.com/images/a3ca5dff4dd5ef54f8cdaa04dbc332a27dd83be5a9fc5ad19a8b35403b1797d3.jpg)
16.3 例41
grid {
justify-items: end;
}
複製程式碼
在行的軸線終點處對齊。
![網格專案的對齊方式演示3](https://i.iter01.com/images/01b68cb48e6d596c60c388bf563bd7a9cafdf42291e885ea5f500cad67a02a02.jpg)
16.4 例42
grid {
justify-items: stretch;
}
複製程式碼
在行的軸線方向延伸並填滿整個區域。stretch
是預設值。
![網格專案的對齊方式演示4](https://i.iter01.com/images/94bf4997c9eca793b08c11cd2bd0610622806216b562e6dda8f55ff57467159e.jpg)
16.5 例43
grid {
align-items: start;
}
複製程式碼
在列的軸線起點處對齊。
![網格專案的對齊方式演示5](https://i.iter01.com/images/ec308ed080676ccafc7bca9e770310a5652416c618e9e25d4a0260dd86b0cc8d.jpg)
16.6 例44
grid {
align-items: center;
}
複製程式碼
在列的軸線中點處對齊。
![網格專案的對齊方式演示6](https://i.iter01.com/images/f0c0051e533ae187ec9508b9332505e1c9d5c9f5c3b5e6a9276144c3d5d74606.jpg)
16.7 例45
grid {
align-items: end;
}
複製程式碼
在列的軸線終點處對齊。
![網格專案的對齊方式演示7](https://i.iter01.com/images/f122224a26fadbb8d4756128adb37d3635e748f227a2af0213aa4ed586a6570f.jpg)
16.8 例46
grid {
align-items: stretch;
}
複製程式碼
在列的軸線方向延伸並填滿整個區域。
![網格專案的對齊方式演示8](https://i.iter01.com/images/bd333f75ffc1ab81108bd572cce561608028bad1917f5be36b855ee48825cf55.jpg)
16.9 例47
grid {
justify-items: center;
align-items: center;
}
複製程式碼
專案定位於行軸和列軸線的中間位置。
![網格專案的對齊方式演示9](https://i.iter01.com/images/1aea9f52d006b564035ffa7e4e9e182f2a7b415d79bba61f0f31524959229903.jpg)
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](https://i.iter01.com/images/8435ea14f3af2dd56ccad4fa75a71352ed239f84c4a7096fe58ec433bf790897.jpg)
17.2 例49
.item1 { align-self: start }
.item2 { align-self: center }
.item3 { align-self: end }
複製程式碼
屬性align-self
在列的軸線方向定義對齊方式。
![網格專案的對齊方式演示11](https://i.iter01.com/images/b8c1cf2a72371420b314253a136d1cc8f5cdbdbc90a19c480d866008d2a9773e.jpg)
17.3 例50
.item1 {
justify-self: center
align-self: center
}
複製程式碼
專案1定位在行的軸線和列的軸線的中間位置。
![網格專案的對齊方式演示12](https://i.iter01.com/images/7ba7a89b71b0c263c94025291f2d11a30e77cd5f96727016ea7deff3b9896f2c.jpg)
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](https://i.iter01.com/images/e4cc361f69a98834877af71b66233187659279cc25e9c1fe30f88d8fdb05510d.jpg)
18.2 例52
.grid {
justify-content: end;
}
複製程式碼
列的軌道在行的軸線終點處對齊。
![網格軌道的對齊方式演示2](https://i.iter01.com/images/45b0306ba40d81fbcf73f9c7868501796382a6512bec440dd1cdb8be3feb15db.jpg)
18.3 例53
.grid {
justify-content: center;
}
複製程式碼
列的軌道在行的軸線中間處對齊。
![網格軌道的對齊方式演示3](https://i.iter01.com/images/d3020c76cd928890a496320769e79dc8796516bd535a6da11fe63b4416a1ee33.jpg)
18.4 例54
.grid {
justify-content: space-around;
}
複製程式碼
在每一列的兩側平均分配額外空間。
![網格軌道的對齊方式演示4](https://i.iter01.com/images/9b9752d3906117fbd4d6409f170c4482bc35bdcaf65da0ce5c29ce623d61ebb1.jpg)
18.5 例55
.grid {
justify-content: space-between;
}
複製程式碼
在列與列之間平均分配額外的空間。
![網格軌道的對齊方式演示5](https://i.iter01.com/images/64a2e4cff1430d75814dce7b6c87118fd1573eadbf1664609a914a807a65e3e1.jpg)
18.6 例56
.grid {
justify-content: space-evenly;
}
複製程式碼
在列與列之間及列與邊界之間平均分配額外空間。
![網格軌道的對齊方式演示6](https://i.iter01.com/images/2250515bfb27ad9893b911a6e6d30c15dfdc7949632baa705d761c80dd297202.jpg)
18.7 例57
.grid {
align-content: start;
}
複製程式碼
行的軌道在列的軸線起點處對齊,屬性start
是預設值。
![網格軌道的對齊方式演示7](https://i.iter01.com/images/068544790315d9c8f3b531687c2f8a54f4e2c4d6481c9fa4cdb6738d926b0032.jpg)
18.8 例58
.grid {
align-content: end;
}
複製程式碼
行的軌道在列的軸線終點處對齊。
![網格軌道的對齊方式演示8](https://i.iter01.com/images/c3c898193120b11f7e3d12e59f17a9e63010fe7e67efff29e4fc366c427a7db5.jpg)
18.9 例59
.grid {
align-content: center;
}
複製程式碼
行的軌道在列的軸線中點處對齊。
![網格軌道的對齊方式演示9](https://i.iter01.com/images/3014158532b39d85b94fb69c6e9b4718ddb231df9dc9f11dc6340c23a076059f.jpg)
18.10 例60
.grid {
align-content: space-around;
}
複製程式碼
每一行的兩側平均分配額外空間。
![網格軌道的對齊方式演示10](https://i.iter01.com/images/3c9c68ace56fb32f232874630d5098f5da90d5e731580cee1aea50aadfe40aee.jpg)
18.11 例61
.grid {
align-content: space-between;
}
複製程式碼
在行與行之間平均分配額外空間。
![網格軌道的對齊方式演示11](https://i.iter01.com/images/f28a421334c979d573a6e6c8a1939f858fe07406005cbbd66ad1f7f6a14450ea.jpg)
18.12 例62
.grid {
align-content: space-evenly;
}
複製程式碼
在行與行之間及行與邊界之間平均分配額外空間。
![網格軌道的對齊方式演示12](https://i.iter01.com/images/7a6defd3dc9a25aa68a376329e819773381c04b07349a7a6ba8d5b7b652ecffc.jpg)
結語
本教程相對全面地介紹了網格的相關內容,但這並不是一個完整的技術文件。想更全面的學習相關內容,推薦訪問 Mozilla開發者網路 和 W3C 的網格文件。
由於能力有限,翻譯中難免錯誤較多,還請大家多多諒解!
十分感謝原文作者Jonathan Suh在本文排版設計,示例製作,文字編輯等方面卓越的工作。
為了獲得最佳的閱體驗,請訪問如下排版的教程: