簡言

CSS網(wǎng)格布局（Grid）是一套二維的頁面布局系統(tǒng)，它的出現(xiàn)將完全顛覆頁面布局的傳統(tǒng)方式。傳統(tǒng)的CSS頁面布局 一直不夠理想。包括table布局外莲、浮動(dòng)、定位及內(nèi)聯(lián)塊等方式，從本質(zhì)上都是Hack的方式偷线，并且遺漏了一些重要的功能（比如：垂直居中）磨确。Flexbox的出現(xiàn)部分解決了上述問題，但Flex布局是為了解決簡單的一維布局声邦，適用于頁面局部布局乏奥。而Grid天然就是為了解決復(fù)雜的二維布局而出現(xiàn)的，適用頁面的整體布局亥曹。在實(shí)際工作中英融，Grid和Flexbox不但不矛盾，而且還能很好的結(jié)合使用歇式。做為WEB程序員，我們在頁面布局問題上都付出過努力胡野，也將不斷探索新的方案材失。而Grid是第一個(gè)專門為布局問題而生的CSS模塊，我們有理由對(duì)Grid充滿期待。

本文包括18個(gè)小節(jié)，62個(gè)實(shí)例悼潭，完整閱讀需要時(shí)間20分鐘以上仇箱。

為了獲得最佳的閱體驗(yàn)，可以訪問如下格式的教程：

學(xué)習(xí)CSS網(wǎng)格

1 網(wǎng)格容器

將屬性 display 值設(shè)為 grid 或 inline-grid 就創(chuàng)建了一個(gè)網(wǎng)格容器患朱，所有容器直接子結(jié)點(diǎn)自動(dòng)成為網(wǎng)格項(xiàng)目。

1.1 例1

grid  {
    display: grid;
｝

網(wǎng)格項(xiàng)目按行排列，網(wǎng)格項(xiàng)目占用整個(gè)容器的寬度秸弛。

網(wǎng)格容器演示1

演示程序

1.1 例2

grid  {
    display: inline-grid;
｝

網(wǎng)格項(xiàng)目按行排列，網(wǎng)格項(xiàng)目寬度由自身寬度決定洪碳。

網(wǎng)格容器演示2

演示程序

2 顯示網(wǎng)格

屬性grid-template-rows和grid-template-columns用于顯示定義網(wǎng)格递览，分別用于定義行軌道和列軌道。

2.1 例3

grid  {
    display: grid;
    grid-template-rows: 50px 100px瞳腌；
｝

屬性grid-template-rows用于定義行的尺寸绞铃，即軌道尺寸。軌道尺寸可以是任何非負(fù)的長度值（px嫂侍，%儿捧，em，等）

網(wǎng)格項(xiàng)目1的行高是50px挑宠，網(wǎng)格項(xiàng)目2的行高是100px菲盾。

因?yàn)橹欢x了兩個(gè)行高，網(wǎng)格項(xiàng)目3和4的行高取決于其本身的高度各淀。

顯示網(wǎng)格演示1

演示程序

2.2 例4

grid  {
    display: grid;
    grid-template-columns: 90px 50px 120px亿汞；
｝

類似于行的定義，屬性grid-template-columns用于定義列的尺寸揪阿。

因?yàn)槎x中只有三列疗我，所以項(xiàng)目4咆畏，5，6排在新的一行; 并因?yàn)樗鼈兾挥诘?吴裤，2旧找，3列的軌道上，所以其寬度等于定義中第1麦牺，2钮蛛，3列軌道的寬度。

網(wǎng)格項(xiàng)目的第1列剖膳，第2列魏颓，第3列的寬度分別是 90px, 50px 和 120px 。

顯示網(wǎng)格演示2

演示程序

2.3 例5

grid  {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr吱晒；
｝

單位fr用于表示軌道尺寸配額甸饱，表示按配額比例分配可用空間。

本例中仑濒，項(xiàng)目1占 1/4 寬度叹话，項(xiàng)目2占 1/4 寬度，項(xiàng)目3占 1/2 寬度墩瞳。

顯示網(wǎng)格演示3

演示程序

2.4 例6

grid  {
    display: grid;
    grid-template-columns: 3rem 25% 1fr 2fr驼壶；
｝

單位fr和其它長度單位混合使用時(shí)，fr的計(jì)算基于其它單位分配后的剩余空間喉酌。

本例中热凹，1fr = (容器寬度 - 3rem - 容器寬度的25%) / 3

顯示網(wǎng)格演示4

演示程序

3 軌道的最小最大尺寸設(shè)置

函數(shù)minmax()用于定義軌道最小/最大邊界值。

3.1 例7

grid  {
    display: grid;
    grid-template-rows:    minmax(100px, auto);
    grid-template-columns: minmax(auto, 50%) 1fr 3em;
｝

函數(shù)minmax()接收兩個(gè)參數(shù)：第一個(gè)參數(shù)表示最小軌道尺寸泪电，第二個(gè)參數(shù)表示最大軌道尺寸碌嘀。長度值可以是auto，表示軌道尺寸可以根據(jù)內(nèi)容大小進(jìn)行伸長或收縮歪架。

本例中股冗，第一行最小高度設(shè)置成100px，但是最大高度設(shè)置成auto和蚪，表示行高可以根據(jù)內(nèi)容伸長超過100px止状。

本例中，第一列寬度的最大值設(shè)置成50%攒霹，表示其寬度不能超過整個(gè)容器寬度的50%怯疤。

軌道的最小最大尺寸設(shè)置演示1

演示程序

4 重復(fù)的網(wǎng)格軌道

函數(shù)repeat()用來定義重復(fù)的網(wǎng)格軌道，尤其適用于有多個(gè)相同項(xiàng)目的情況下催束。

4.1 例8

grid  {
    display: grid;
    grid-template-rows:    repeat(4, 100px);
    grid-template-columns: repeat(3, 1fr);
｝

函數(shù)repeat()接收兩個(gè)參數(shù)：第一個(gè)參數(shù)表示重復(fù)的次數(shù)集峦，第二個(gè)參數(shù)表示軌道尺寸。

重復(fù)的網(wǎng)格軌道演示1

演示程序

4.2 例9

grid  {
    display: grid;
    grid-template-columns: 30px repeat(3, 1fr) 30px;
｝

函數(shù)repeat()可以用在軌道定義列表當(dāng)中。

本例中塔淤，第1列和第5列的寬度是30px摘昌。函數(shù)repeat()創(chuàng)建了中間3列，每一列寬度都是1fr高蜂。

重復(fù)的網(wǎng)格軌道演示2

演示程序

5 定義網(wǎng)格間隙

屬性grid-column-gap 和 grid-row-gap用于定義網(wǎng)格間隙聪黎。

網(wǎng)格間隙只創(chuàng)建在行列之間，項(xiàng)目與邊界之間無間隙备恤。

5.1 例10

grid  {
    display: grid;
    grid-row-gap:    20px;
    grid-column-gap: 5rem;
｝

間隙尺寸可以是任何非負(fù)的長度值（px稿饰，%，em等）露泊。

定義網(wǎng)格間隙演示1

演示程序

5.2 例11

grid  {
    display: grid;
    grid-gap: 100px 1em;
｝

屬性grid-gap是grid-row-gap和grid-column-gap的簡寫形式喉镰。

第一個(gè)值表示行間隙，第二個(gè)值表示列間隙惭笑。

定義網(wǎng)格間隙演示2

演示程序

5.3 例12

grid  {
    display: grid;
    grid-gap: 2rem;
｝

如只有一個(gè)值侣姆，則其即表示行間隙，也表示列間隙脖咐。

定義網(wǎng)格間隙演示3

演示程序

6 用網(wǎng)格線編號(hào)定位項(xiàng)目

網(wǎng)格線本質(zhì)上是用來表示網(wǎng)格軌道的開始和結(jié)束。

每一條網(wǎng)格線編號(hào)都以1開始汇歹，以1為步長向前編號(hào)屁擅，其中包括行列兩組網(wǎng)格線。

6.1 例13

.item1 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
}

這是一個(gè)3行2列的網(wǎng)格产弹，即在行上有4條網(wǎng)格線派歌，在列上有3條網(wǎng)格線。項(xiàng)目1利用網(wǎng)格線編號(hào)定位在第2行第2列的位置上痰哨。

本例中胶果，項(xiàng)目只跨越一行一列，則grid-row-end和grid-column-end的定義可以省略斤斧。

用網(wǎng)格線編號(hào)定位項(xiàng)目演示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的簡寫形式。

如果只指定一個(gè)值撬讽，它表示 grid-row/column-start蕊连。

如果兩個(gè)值都指定，第一個(gè)表示 grid-row/column-start 游昼，第二個(gè)值表示grid-row/column-end甘苍。而且你必須用斜杠（/）分隔這兩個(gè)值。

用網(wǎng)格線編號(hào)定位項(xiàng)目演示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的簡寫形式烘豌。

如果四個(gè)值都指定载庭，則第一個(gè)表示 grid-row-start, 第二個(gè)表示 grid-column-start, 第三個(gè)表示 grid-row-end ,第四個(gè)表示 grid-column-end。

用網(wǎng)格線編號(hào)定位項(xiàng)目演示3

演示程序

7 網(wǎng)格項(xiàng)目跨越行列

網(wǎng)格項(xiàng)目默認(rèn)都占用一行和一列，但可以使用前一節(jié)中定位項(xiàng)目的屬性來指定項(xiàng)目跨越多行或多列囚聚。

7.1 例16

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

通過grid-column-start和grid-column-end屬性值的設(shè)置靖榕，使該網(wǎng)格項(xiàng)目跨越多列。

網(wǎng)格項(xiàng)目跨越行列演示1

演示程序

7.2 例17

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

通過grid-row-start和grid-row-end屬性值的設(shè)置靡挥，使該網(wǎng)格項(xiàng)目跨越多行序矩。

網(wǎng)格項(xiàng)目跨越行列演示2

演示程序

7.3 例18

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

簡寫屬性 grid-row 和 grid-column 即能用來定位項(xiàng)目，也能用來使項(xiàng)目跨越多個(gè)行列跋破。

網(wǎng)格項(xiàng)目跨越行列演示1

演示程序

7.4 例19

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

關(guān)鍵字 span 用來指定跨越行或列的數(shù)量簸淀。

網(wǎng)格項(xiàng)目跨越行列演示1

演示程序

8 網(wǎng)格線命名

當(dāng)利用屬性grid-template-rows 和 grid-template-columns定義網(wǎng)格時(shí)，可以同時(shí)定義網(wǎng)格線的名稱毒返。網(wǎng)格線名稱可以用于定位網(wǎng)格項(xiàng)目租幕。

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定義網(wǎng)格，同時(shí)定義網(wǎng)格線名稱拧簸。

為避免混淆劲绪，網(wǎng)格線名稱應(yīng)避免使用規(guī)范中的關(guān)鍵字（span等）。

定義網(wǎng)格線名稱的方法是要將其放在中括號(hào)內(nèi)（[name-of-line]）盆赤，并要和網(wǎng)格軌道相對(duì)應(yīng)贾富。

網(wǎng)格線命名演示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];
｝

可以給同一網(wǎng)格線定義多個(gè)名稱，方法就是在中括號(hào)內(nèi)用空格將多個(gè)名稱分開牺六。

每一個(gè)網(wǎng)格線名都可以被引用颤枪，以用來定位網(wǎng)格項(xiàng)目。

網(wǎng)格線命名演示2

9 用網(wǎng)格線名定位項(xiàng)目

利用命名的網(wǎng)格線淑际，可以很方便地進(jìn)行項(xiàng)目定位畏纲。

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;
}

引用網(wǎng)格線名稱不用加中括號(hào)。

用網(wǎng)格線名定位項(xiàng)目演示1

演示程序

9.2 例23

.item1 {
    grid-row:    row-2-start / row-end;
    grid-column: col-2-start / col-end;
}

簡寫屬性grid-row 和 grid-column也可以利用網(wǎng)格線名稱來定位項(xiàng)目春缕。

用網(wǎng)格線名定位項(xiàng)目演示2

演示程序

10 用同名網(wǎng)格線命名和定位項(xiàng)目

函數(shù)repeat()可以定義同名網(wǎng)格線盗胀。這節(jié)省了給每條網(wǎng)格都命名的時(shí)間。

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]);
}

函數(shù)repeat()可以用來定義同名網(wǎng)格線锄贼。 這樣多個(gè)網(wǎng)格線擁有相同的名字票灰。

同名網(wǎng)格線會(huì)被分配一個(gè)位置編號(hào)，做為其唯一標(biāo)識(shí)宅荤。

用同名網(wǎng)格線命名和定位項(xiàng)目演示1

10.2 例25

.item1 {
    grid-row:    row-start 2 / row-end 3;
   grid-column: col-start / col-start 3;
}

用同名網(wǎng)格線來定位項(xiàng)目時(shí)米间，應(yīng)注意在網(wǎng)格線名稱和編號(hào)之間有一個(gè)空格。

本例中膘侮，項(xiàng)目1的行定位開始于第2條名稱是row-start的網(wǎng)格線屈糊，結(jié)束于第3條名稱是row-end的網(wǎng)格線；列定位開始于第1條名稱是col-start的網(wǎng)格線琼了，結(jié)束于第3條名稱是col-start的網(wǎng)格線逻锐。

用同名網(wǎng)格線命名和定位項(xiàng)目演示2

演示程序

11 用網(wǎng)格區(qū)域命名和定位項(xiàng)目

如同網(wǎng)格線命名夫晌，可以用屬性grid-template-areas給網(wǎng)格區(qū)域命名。網(wǎng)格區(qū)域名稱可以用來定位網(wǎng)格項(xiàng)目昧诱。

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;
}

一組區(qū)域名稱要放在單引號(hào)或雙引號(hào)內(nèi)晓淀，每一個(gè)名稱之間以空格分隔。

每一組名稱定義一行盏档，每一個(gè)名稱定義一列凶掰。

用網(wǎng)格區(qū)域命名和定位項(xiàng)目演示1

11.2 例27

header {
    grid-row-start: header;
    grid-row-end: header;
    grid-column-start: header;
    grid-column-end: header;
}

網(wǎng)格區(qū)域名稱可以用在屬性grid-row-start, grid-row-end, grid-column-start, 和 grid-column-end的值中，用來定位項(xiàng)目蜈亩。

用網(wǎng)格區(qū)域命名和定位項(xiàng)目演示2

11.3 例28

footer {
    grid-row: footer;
    grid-column: footer;
}

網(wǎng)格區(qū)域名稱也可以用于簡寫屬性grid-row 和 grid-column的值中懦窘。

用網(wǎng)格區(qū)域命名和定位項(xiàng)目演示3

11.4 例29

aside {
    grid-area: sidebar;
}

網(wǎng)格區(qū)域名稱也可以用于簡寫屬性grid-area的值中。

用網(wǎng)格區(qū)域命名和定位項(xiàng)目演示4

演示程序

12 隱式網(wǎng)格

隱式網(wǎng)格用來在顯式網(wǎng)格之外定位項(xiàng)目稚配。有時(shí)在顯示網(wǎng)格中沒有足夠的空間畅涂，或者是要在顯示網(wǎng)格之外定位項(xiàng)目就要用到隱式網(wǎng)格。這時(shí)可以把這些項(xiàng)目放置在隱式網(wǎng)格中道川。

隱式網(wǎng)格可以通過屬性 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;
}

本例中，只定一個(gè)行軌道冒萄，因此項(xiàng)目 1 和 2 高 70px 臊岸。

第2行軌道有隱式網(wǎng)格自動(dòng)創(chuàng)建并為項(xiàng)目 3 和 4 分配了空間。 屬性grid-auto-rows 定義了隱式網(wǎng)格的行軌道尺寸尊流，即項(xiàng)目3和4的高度是 140px 帅戒。

隱式網(wǎng)格演示1

演示程序

12.2 例31

grid {
    display : grid;
    grid-auto-flow: row;
}

缺省的網(wǎng)格布局方向是行的方向（row）。

隱式網(wǎng)格演示2

12.3 例32

grid {
    display : grid;
    grid-auto-flow: column;
}

網(wǎng)格的布局方向可以定義為列的方向（column）奠旺。

隱式網(wǎng)格演示3

12.4 例33

grid {
    display : grid;
    grid-template-columns: 30px 60px;
    grid-auto-flow:        column;
    grid-auto-columns:     1fr;
}

本例中蜘澜，我們只定義了兩個(gè)列軌道的尺寸30px 和 60px施流。

隱式網(wǎng)格中自動(dòng)創(chuàng)建其它列并給項(xiàng)目3响疚，4，5分配空間瞪醋；分配的空間尺寸是通過屬性 grid-auto-columns定義的忿晕。

隱式網(wǎng)格演示4

演示程序

13 隱式命名的網(wǎng)格區(qū)域

網(wǎng)格線名稱可以任意指定，但分配以 -start 和 -end 結(jié)尾的名字有額外的益處银受，這樣隱式地創(chuàng)建了具名網(wǎng)格區(qū)域践盼，該名稱可以用于項(xiàng)目定位。

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的網(wǎng)格線咕幻，它們隱式地給網(wǎng)格區(qū)域分派了名稱（inner）。

item1 {
    grid-area: inner;
}

這樣我們就能夠直接使用網(wǎng)格區(qū)域名來定位顶霞，而不需要再用網(wǎng)格線來定位項(xiàng)目了肄程。

隱式命名的網(wǎng)格區(qū)域演示1

演示程序

14 隱式命名的網(wǎng)格線

隱式命名網(wǎng)格線和隱式命名的網(wǎng)格區(qū)域的工作原理剛好相反锣吼。

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;
}

定義網(wǎng)格區(qū)域時(shí)隱式的命名了網(wǎng)格線的名稱。這些網(wǎng)格線的名稱是基于區(qū)域名加上-start 或 -end后綴組成的蓝厌。

隱式命名的網(wǎng)格線演示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是通過隱式網(wǎng)格線名稱進(jìn)行定位的。

隱式命名的網(wǎng)格線演示2

演示程序

15 層疊網(wǎng)格項(xiàng)目

通過項(xiàng)目定位可以使多個(gè)項(xiàng)目層疊在一起拓提，屬性z-index可以改變層疊項(xiàng)目的層次读恃。

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 }

本例中，項(xiàng)目1 和 2 行定位開始于第1條行網(wǎng)格線代态，并跨越兩列寺惫。

兩個(gè)項(xiàng)目都是用網(wǎng)格線編號(hào)進(jìn)行定位。項(xiàng)目1起始于第1條列網(wǎng)格線胆数，項(xiàng)目2起始于第2條列網(wǎng)格線肌蜻，這使得兩個(gè)項(xiàng)目在第一行中間列發(fā)生層疊。

缺省情況下必尼，項(xiàng)目2將層疊于項(xiàng)目1之上蒋搜；然而，給項(xiàng)目1設(shè)置屬性z-index: 1就使得項(xiàng)目1層疊于項(xiàng)目2之上判莉。

層疊網(wǎng)格項(xiàng)目演示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 定義中的隱式網(wǎng)格線名稱，定位了一個(gè)網(wǎng)格項(xiàng)目（overlay）券盅，并將層疊于上層帮哈。

層疊網(wǎng)格項(xiàng)目演示2

演示程序

16 網(wǎng)格項(xiàng)目的對(duì)齊方式

CSS的 盒模型對(duì)齊模塊 補(bǔ)充了CSS網(wǎng)格的內(nèi)容，網(wǎng)格項(xiàng)目可以按行或列的軸線方向?qū)崿F(xiàn)多種對(duì)齊方式锰镀。

屬性justify-items 和 justify-self 以行軸為參照對(duì)齊項(xiàng)目娘侍，屬性align-items 和 align-self 以列軸為參照對(duì)齊項(xiàng)目。

屬性justify-items 和 align-items 是網(wǎng)格容器的屬性泳炉，并支持如下這些值：

• 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
}

在行的軸線起點(diǎn)處對(duì)齊憾筏。

網(wǎng)格項(xiàng)目的對(duì)齊方式演示1

演示程序

16.2 例40

grid {
    justify-items: center;
}

在行的軸線中點(diǎn)處對(duì)齊。

網(wǎng)格項(xiàng)目的對(duì)齊方式演示2

演示程序

16.3 例41

grid {
    justify-items: end;
}

在行的軸線終點(diǎn)處對(duì)齊花鹅。

網(wǎng)格項(xiàng)目的對(duì)齊方式演示3

演示程序

16.4 例42

grid {
    justify-items: stretch;
}

在行的軸線方向延伸并填滿整個(gè)區(qū)域氧腰。stretch是缺省值。

網(wǎng)格項(xiàng)目的對(duì)齊方式演示4

演示程序

16.5 例43

grid {
    align-items: start;
}

在列的軸線起點(diǎn)處對(duì)齊刨肃。

網(wǎng)格項(xiàng)目的對(duì)齊方式演示5

演示程序

16.6 例44

grid {
    align-items: center;
}

在列的軸線中點(diǎn)處對(duì)齊古拴。

網(wǎng)格項(xiàng)目的對(duì)齊方式演示6

演示程序

16.7 例45

grid {
    align-items: end;
}

在列的軸線終點(diǎn)處對(duì)齊。

網(wǎng)格項(xiàng)目的對(duì)齊方式演示7

演示程序

16.8 例46

grid  {
    align-items: stretch;
}

在列的軸線方向延伸并填滿整個(gè)區(qū)域真友。

網(wǎng)格項(xiàng)目的對(duì)齊方式演示8

演示程序

16.9 例47

grid {
    justify-items: center;
    align-items:   center;
}

項(xiàng)目定位于行軸和列軸線的中間位置黄痪。

網(wǎng)格項(xiàng)目的對(duì)齊方式演示9

演示程序

17 網(wǎng)格項(xiàng)目的對(duì)齊方式2

項(xiàng)目可以用屬性align-self 和 justify-self定義自己的對(duì)齊方式，并支持如下這些屬性值：

• 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 在行的軸線方向定義對(duì)齊方式盔然。

網(wǎng)格項(xiàng)目的對(duì)齊方式演示10

演示程序

17.2 例49

.item1 { align-self: start }
.item2 { align-self: center }
.item3 { align-self: end }

屬性align-self 在列的軸線方向定義對(duì)齊方式桅打。

網(wǎng)格項(xiàng)目的對(duì)齊方式演示11

演示程序

17.3 例50

.item1 {
    justify-self: center
    align-self:   center
}

項(xiàng)目1定位在行的軸線和列的軸線的中間位置焕参。

網(wǎng)格項(xiàng)目的對(duì)齊方式演示12

演示程序

18 網(wǎng)格軌道的對(duì)齊方式

在網(wǎng)格容器中，網(wǎng)格軌道延軸線方向有多種對(duì)齊方式油额。

屬性align-content用于定義網(wǎng)格軌道延著行的軸線的對(duì)齊方式叠纷，而屬性justify-content用于定義網(wǎng)格軌道沿著列的軸線的對(duì)齊方式。并分別支持如下屬性：

• 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;
}

列的軌道在行的軸線起點(diǎn)處對(duì)齊潦嘶。start 是缺省值涩嚣。

網(wǎng)格軌道的對(duì)齊方式演示1

演示程序

18.2 例52

.grid {
    justify-content: end;
}

列的軌道在行的軸線終點(diǎn)處對(duì)齊。

網(wǎng)格軌道的對(duì)齊方式演示2

演示程序

18.3 例53

.grid {
    justify-content: center;
}

列的軌道在行的軸線中間處對(duì)齊掂僵。

網(wǎng)格軌道的對(duì)齊方式演示3

演示程序

18.4 例54

.grid {
    justify-content: space-around;
}

在每一列的兩側(cè)平均分配額外空間航厚。

網(wǎng)格軌道的對(duì)齊方式演示4

演示程序

18.5 例55

.grid {
    justify-content: space-between;
}

在列與列之間平均分配額外的空間。

網(wǎng)格軌道的對(duì)齊方式演示5

演示程序

18.6 例56

.grid {
    justify-content: space-evenly;
}

在列與列之間及列與邊界之間平均分配額外空間锰蓬。

網(wǎng)格軌道的對(duì)齊方式演示6

演示程序

18.7 例57

.grid {
    align-content: start;
}

行的軌道在列的軸線起點(diǎn)處對(duì)齊幔睬，屬性start是缺省值。

網(wǎng)格軌道的對(duì)齊方式演示7

演示程序

18.8 例58

.grid {
    align-content: end;
}

行的軌道在列的軸線終點(diǎn)處對(duì)齊芹扭。

網(wǎng)格軌道的對(duì)齊方式演示8

演示程序

18.9 例59

.grid {
    align-content: center;
}

行的軌道在列的軸線中點(diǎn)處對(duì)齊麻顶。

網(wǎng)格軌道的對(duì)齊方式演示9

演示程序

18.10 例60

.grid {
    align-content: space-around;
}

每一行的兩側(cè)平均分配額外空間。

網(wǎng)格軌道的對(duì)齊方式演示10

演示程序

18.11 例61

.grid {
    align-content: space-between;
}

在行與行之間平均分配額外空間舱卡。

網(wǎng)格軌道的對(duì)齊方式演示11

演示程序

18.12 例62

.grid {
    align-content: space-evenly;
}

在行與行之間及行與邊界之間平均分配額外空間辅肾。

網(wǎng)格軌道的對(duì)齊方式演示12

演示程序

結(jié)語

本教程相對(duì)全面地介紹了網(wǎng)格的相關(guān)內(nèi)容，但這并不是一個(gè)完整的技術(shù)文檔轮锥。想更全面的學(xué)習(xí)相關(guān)內(nèi)容矫钓，推薦訪問 Mozilla開發(fā)者網(wǎng)絡(luò) 和 W3C 的網(wǎng)格文檔。

由于能力有限舍杜，翻譯中難免錯(cuò)誤較多新娜，還請大家多多諒解！

十分感謝原文作者Jonathan Suh在本文排版設(shè)計(jì)既绩，示例制作概龄，文字編輯等方面卓越的工作。

為了獲得最佳的閱體驗(yàn)熬词，請?jiān)L問如下排版的教程：

學(xué)習(xí)CSS網(wǎng)格

英文原版