CSS Grid(網(wǎng)格) 布局（又稱為 “Grid(網(wǎng)格)” ），是一個(gè)二維的基于網(wǎng)格的布局系統(tǒng)它的目標(biāo)是完全改變我們基于網(wǎng)格的用戶界面的布局方式河爹。

網(wǎng)格容器(Grid Container)

應(yīng)用 display: grid的元素。這是所有網(wǎng)格項(xiàng)（Grid Items）的直接父級(jí)元素。在這個(gè)例子中喉前，container 就是網(wǎng)格容器(Grid Container)。
舉例：

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

網(wǎng)格項(xiàng)(Grid Item)

網(wǎng)格容器（Grid Container）的子元素（直接子元素）王财。這里item元素就是網(wǎng)格項(xiàng)(Grid Item)被饿，但是 sub-item不是。
舉例

<div class="container">
  <div class="item"></div> 
  <div class="item">
    <p class="sub-item"></p>  //不是網(wǎng)格項(xiàng)（Grid Item）
  </div>
  <div class="item"></div>
</div>

網(wǎng)格線(Grid Line)

構(gòu)成網(wǎng)格結(jié)構(gòu)的分界線搪搏。它們既可以是垂直的（“列網(wǎng)格線(column grid lines)”）狭握，也可以是水平的（“行網(wǎng)格線(row grid lines)”），并位于行或列的任一側(cè)疯溺。例如论颅，這里的黃線就是一條列網(wǎng)格線。

網(wǎng)格線(Grid Line)

網(wǎng)格軌道(Grid Track)

兩條相鄰網(wǎng)格線之間的空間囱嫩。你可以把它們想象成網(wǎng)格的列或行恃疯。下圖是第二條和第三條 行網(wǎng)格線 之間的 網(wǎng)格軌道(Grid Track)。

網(wǎng)格軌道(Grid Track)

網(wǎng)格單元格(Grid Cell)

兩個(gè)相鄰的行和兩個(gè)相鄰的列網(wǎng)格線之間的空間墨闲。這是 Grid(網(wǎng)格) 系統(tǒng)的一個(gè)“單元”今妄。下圖是第1至第2條 行網(wǎng)格線 和第2至第3條 列網(wǎng)格線 交匯構(gòu)成的 網(wǎng)格單元格(Grid Cell)。

網(wǎng)格單元格(Grid Cell)

網(wǎng)格區(qū)域(Grid Area)

4條網(wǎng)格線包圍的總空間。一個(gè) 網(wǎng)格區(qū)域(Grid Area) 可以由任意數(shù)量的 網(wǎng)格單元格(Grid Cell) 組成盾鳞。下圖是 行網(wǎng)格線1和3犬性，以及列網(wǎng)格線1和3 之間的網(wǎng)格區(qū)域。

網(wǎng)格區(qū)域(Grid Area)

父元素 網(wǎng)格容器(Grid Container) 屬性

1. display

將元素定義為網(wǎng)格容器腾仅，并為其內(nèi)容建立新的 網(wǎng)格格式上下文乒裆。
值：

• grid ：生成一個(gè)塊級(jí)網(wǎng)格

• inline-grid ：生成一個(gè)內(nèi)聯(lián)網(wǎng)格

• subgrid ：如果你的網(wǎng)格容器本身是另一個(gè)網(wǎng)格的網(wǎng)格項(xiàng)（即嵌套網(wǎng)格），你可以使用這個(gè)屬性來表示
  你希望它的行/列的大小繼承自它的父級(jí)網(wǎng)格容器推励，而不是自己指定的鹤耍。

如果你想要設(shè)置為網(wǎng)格容器元素本身已經(jīng)是網(wǎng)格項(xiàng)（嵌套網(wǎng)格布局），用這個(gè)屬性指明這個(gè)容器內(nèi)部的網(wǎng)格項(xiàng)的行列尺寸直接繼承其父級(jí)的網(wǎng)格容器屬性验辞。

.container {
    display: grid | inline-grid | subgrid;
}

注意：在 網(wǎng)格容器(Grid Container) 上使用column稿黄，float，clear跌造， vertical-align 不會(huì)產(chǎn)生任何效果杆怕。

2. grid-template-columns / grid-template-rows

使用空格分隔的值列表，用來定義網(wǎng)格的列和行鼻听。這些值表示 網(wǎng)格軌道(Grid Track) 大小财著，它們之間的空格表示網(wǎng)格線联四。
值：

• <track-size>： 可以是長度值撑碴，百分比，或者等份網(wǎng)格容器中可用空間（使用 fr 單位）
• <line-name>：你可以選擇的任意名稱

.container {
    grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
    grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

舉例：

.container{
    grid-template-columns: 40px 50px auto 50px 40px; //表示一共5列
    grid-template-rows: 25% 100px auto; //表示一共3行
}

分隔線默認(rèn)名稱

但是你可以明確的指定網(wǎng)格線(Grid Line)名稱朝墩，即 <line-name> 值醉拓。請(qǐng)注意網(wǎng)格線名稱的括號(hào)語法：

.container {
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

分隔線自定義名稱

請(qǐng)注意，一條網(wǎng)格線(Grid Line)可以有多個(gè)名稱收苏。例如亿卤，這里的第二條 行網(wǎng)格線(row grid lines) 將有兩個(gè)名字：row1-end 和row2-start ：

.container{
    grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

如果你的定義包含多個(gè)重復(fù)值，則可以使用 repeat() 表示法來簡化定義：

.container {
    grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

上面的代碼等價(jià)于：

.container {
    grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

fr 單元允許你用等分網(wǎng)格容器剩余可用空間來設(shè)置 網(wǎng)格軌道(Grid Track) 的大小 鹿霸。例如排吴，下面的代碼會(huì)將每個(gè)網(wǎng)格項(xiàng)設(shè)置為網(wǎng)格容器寬度的三分之一：

.container {
    grid-template-columns: 1fr 1fr 1fr;
}

剩余可用空間是除去所有非靈活網(wǎng)格項(xiàng)之后計(jì)算得到的。在這個(gè)例子中懦鼠，可用空間總量減去 50px 后钻哩，再給 fr 單元的值3等分：

.container {
    grid-template-columns: 1fr 50px 1fr 1fr;
}

3.grid-template-areas

通過引用 grid-area 屬性指定的 網(wǎng)格區(qū)域(Grid Area) 名稱來定義網(wǎng)格模板。重復(fù)網(wǎng)格區(qū)域的名稱導(dǎo)致內(nèi)容跨越這些單元格肛冶。一個(gè)點(diǎn)號(hào)（.）代表一個(gè)空的網(wǎng)格單元街氢。這個(gè)語法本身可視作網(wǎng)格的可視化結(jié)構(gòu)。

值：

• <grid-area-name>：由網(wǎng)格項(xiàng)的 grid-area 指定的網(wǎng)格區(qū)域名稱
• .（點(diǎn)號(hào)） ：代表一個(gè)空的網(wǎng)格單元
• none：不定義網(wǎng)格區(qū)域
  示例：

.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

上面的代碼將創(chuàng)建一個(gè) 4 列 3 行的網(wǎng)格睦袖。整個(gè)頂行將由 header 區(qū)域 組成珊肃。中間一排將由兩個(gè) main 區(qū)域，一個(gè)是空單元格，一個(gè) sidebar 區(qū)域組成伦乔。最后一行全是 footer 區(qū)域組成厉亏。

image

你的聲明中的每一行都需要有相同數(shù)量的單元格。

4. grid-template

用于定義 grid-template-rows 评矩，grid-template-columns叶堆，grid-template-areas 縮寫屬性。

值：

• none：將所有三個(gè)屬性設(shè)置為其初始值
• subgrid：將grid-template-rows斥杜，grid-template-columns的值設(shè)為 subgrid虱颗，grid-template-areas設(shè)為初始值
• <grid-template-rows> / <grid-template-columns>：將 grid-template-columns 和 grid-template-rows設(shè)置為相應(yīng)地特定的值，并且設(shè)置grid-template-areas為none

例子：

.container {
  grid-template:
    "header header header" 25px  // 行高 rows
    "footer footer footer" 25px  // 行高 rows
    / auto 50px auto; //  列寬 columns
}

等價(jià)于：

.container {
  grid-template-rows: 25px 25px;
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

由于 grid-template不會(huì)重置 隱式 網(wǎng)格屬性（grid-auto-columns蔗喂， grid-auto-rows忘渔， 和 grid-auto-flow），
這可能是你想在大多數(shù)情況下做的缰儿，建議使用 grid屬性而不是 grid-template畦粮。

5. grid-column-gap / grid-row-gap

指定網(wǎng)格線(grid lines)的大小。你可以把它想象為設(shè)置列/行之間間距的寬度乖阵。

示例：

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px; // 列與列間隙 10px
  grid-row-gap: 15px;  //行與行間隙15px
}

列/行之間間距的寬度 gap

注：只能在 列/行 之間創(chuàng)建間距宣赔，網(wǎng)格外部邊緣不會(huì)有這個(gè)間距。

6. grid-gap

grid-column-gap和 grid-row-gap的縮寫語法

值：

• <grid-row-gap> <grid-column-gap>：長度值

示例：

.container{
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-gap: 10px 15px; // <grid-row-gap> <grid-column-gap>;
}

7. justify-items

沿著 行軸線(row axis) 對(duì)齊 網(wǎng)格項(xiàng)(grid items) 內(nèi)的內(nèi)容（相反的屬性是 align-items沿著列軸線對(duì)齊）瞪浸。該值適用于容器內(nèi)的所有網(wǎng)格項(xiàng)儒将。

值：

• start：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域(grid area)的左側(cè)
• end：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的右側(cè)
• center：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的中間（水平居中）
• stretch：填滿網(wǎng)格區(qū)域?qū)挾龋J(rèn)值）

.container {
    justify-items: start | end | center | stretch;
}

示例：

.container {
  justify-items: start;
}

image

.container{
  justify-items: end;
}

image

.container{
  justify-items: center;
}

image

.container{
  justify-items: stretch;
}

image

這些行為也可以通過單獨(dú)網(wǎng)格項(xiàng)(grid items) 的 justify-self屬性設(shè)置。

8. align-items

沿著 列軸線(column axis) 對(duì)齊 網(wǎng)格項(xiàng)(grid items) 內(nèi)的內(nèi)容（相反的屬性是 justify-items沿著行軸線對(duì)齊）对蒲。該值適用于容器內(nèi)的所有網(wǎng)格項(xiàng)钩蚊。

值：

• start：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域(grid area)的頂部
• end：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的底部
• center：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的中間（垂直居中）
• stretch：填滿網(wǎng)格區(qū)域高度（默認(rèn)值）

.container {
  align-items: start | end | center | stretch;
}

示例：

.container {
  align-items: start;
}

image

.container {
  align-items: end;
}

image

.container {
  align-items: center;
}

image

.container {
  align-items: stretch;
}

image

這些行為也可以通過單獨(dú)網(wǎng)格項(xiàng)(grid items) 的 align-self屬性設(shè)置。

9. justify-content

有時(shí)蹈矮，你的網(wǎng)格合計(jì)大小可能小于其 網(wǎng)格容器(grid container) 大小砰逻。 如果你的所有 網(wǎng)格項(xiàng)(grid items) 都使用像 px 這樣的非靈活單位設(shè)置大小，在這種情況下泛鸟，您可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對(duì)齊方式蝠咆。 此屬性沿著 行軸線(row axis) 對(duì)齊網(wǎng)格（相反的屬性是 align-content，沿著列軸線對(duì)齊網(wǎng)格）北滥。

值：

• start：將網(wǎng)格對(duì)齊到 網(wǎng)格容器(grid container) 的左邊
• end：將網(wǎng)格對(duì)齊到 網(wǎng)格容器 的右邊
• center：將網(wǎng)格對(duì)齊到 網(wǎng)格容器 的中間（水平居中）
• stretch：調(diào)整 網(wǎng)格項(xiàng)(grid items) 的寬度刚操，允許該網(wǎng)格填充滿整個(gè) 網(wǎng)格容器 的寬度
• space-around：在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間，左右兩端放置一半的空間
• space-between：在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間碑韵，左右兩端沒有空間
• space-evenly：在每個(gè)柵格項(xiàng)目之間放置一個(gè)均勻的空間赡茸，左右兩端放置一個(gè)均勻的空間

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

示例：

.container {
  justify-content: start;
}

image

.container {
  justify-content: end;
}

image

.container {
  justify-content: center;
}

image

.container {
  justify-content: stretch;
}

image

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

image

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

image

CSS 代碼:

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

image

10. align-content

有時(shí)，你的網(wǎng)格合計(jì)大小可能小于其 網(wǎng)格容器(grid container) 大小祝闻。 如果你的所有 網(wǎng)格項(xiàng)(grid items) 都使用像 px 這樣的非靈活單位設(shè)置大小占卧，在這種情況下遗菠，您可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對(duì)齊方式。 此屬性沿著 列軸線(column axis) 對(duì)齊網(wǎng)格（相反的屬性是 justify-content华蜒，沿著行軸線對(duì)齊網(wǎng)格）辙纬。

值：

• start：將網(wǎng)格對(duì)齊到 網(wǎng)格容器(grid container) 的頂部
• end：將網(wǎng)格對(duì)齊到 網(wǎng)格容器 的底部
• center：將網(wǎng)格對(duì)齊到 網(wǎng)格容器 的中間（垂直居中）
• stretch：調(diào)整 網(wǎng)格項(xiàng)(grid items) 的高度，允許該網(wǎng)格填充滿整個(gè) 網(wǎng)格容器 的高度
• space-around：在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間叭喜，上下兩端放置一半的空間
• space-between：在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間贺拣，上下兩端沒有空間
• space-evenly：在每個(gè)柵格項(xiàng)目之間放置一個(gè)均勻的空間，上下兩端放置一個(gè)均勻的空間

.container {
  align-content: start |  end  | center | stretch | space-around | space-between | space-evenly;  
}

示例：

.container {
  align-content: start;  
}

image

.container {
2\.  align-content:  end;  
}

image

.container {
  align-content: center;   
}

image

.container {
  align-content: stretch;  
}

image

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

image

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

image

CSS 代碼:

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

image

11. grid-auto-columns / grid-auto-rows

指定任何自動(dòng)生成的網(wǎng)格軌道(grid tracks)（又名隱式網(wǎng)格軌道）的大小捂蕴。在你明確定位的行或列（通過 grid-template-rows / grid-template-columns）譬涡，超出定義的網(wǎng)格范圍時(shí)，隱式網(wǎng)格軌道被創(chuàng)建了啥辨。

值：
– <track-size>：可以是長度值涡匀，百分比，或者等份網(wǎng)格容器中可用空間（使用 fr 單位）

.container {
  grid-auto-columns:  <track-size>  ...;
  grid-auto-rows:  <track-size>  ...;
}

為了說明如何創(chuàng)建隱式網(wǎng)格軌道溉知，請(qǐng)考慮一下以下的代碼：

.container {
  grid-template-columns:  60px  60px;
  grid-template-rows:  90px  90px
}

image

生成了一個(gè)2×2的網(wǎng)格陨瘩。

但現(xiàn)在想象一下，你使用 grid-column和 grid-row 來定位你的網(wǎng)格項(xiàng)（grid items）级乍，像這樣：

.item-a {
  grid-column:  1  /  2;
  grid-row:  2  /  3;
}

.item-b {
  grid-column:  5  /  6;
  grid-row:  2  /  3;
}

image

我們告訴 .item-b 從第 5 條列網(wǎng)格線開始到第 6 條列網(wǎng)格線結(jié)束舌劳，但我們從來沒有定義過 第5 或 第6 列網(wǎng)格線。
因?yàn)槲覀円玫木W(wǎng)格線不存在玫荣，所以創(chuàng)建寬度為 0 的隱式網(wǎng)格軌道以填補(bǔ)空缺甚淡。我們可以使用 grid-auto-columns和 grid-auto-rows 來指定這些隱式軌道的大小：

.container {
  grid-auto-columns:  60px;
}

image

12. grid-auto-flow

如果你有一些沒有明確放置在網(wǎng)格上的網(wǎng)格項(xiàng)(grid items)崇决，自動(dòng)放置算法 會(huì)自動(dòng)放置這些網(wǎng)格項(xiàng)材诽。該屬性控制自動(dòng)布局算法如何工作底挫。

值：

• row：告訴自動(dòng)布局算法依次填充每行恒傻，根據(jù)需要添加新行
• column：告訴自動(dòng)布局算法依次填入每列，根據(jù)需要添加新列
• dense：告訴自動(dòng)布局算法在稍后出現(xiàn)較小的網(wǎng)格項(xiàng)時(shí)建邓，嘗試填充網(wǎng)格中較早的空缺

.container {
  grid-auto-flow: row | column | row dense | column dense
}

請(qǐng)注意盈厘，dense 集可能導(dǎo)致你的網(wǎng)格項(xiàng)出現(xiàn)亂序。

示例：

考慮以下 HTML :

<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

你定義一個(gè)有 5 列和 2 行的網(wǎng)格官边，并將 grid-auto-flow設(shè)置為 row（也就是默認(rèn)值）：

.container {
  display: grid;
  grid-template-columns:  60px  60px  60px  60px  60px;
  grid-template-rows:  30px  30px;
  grid-auto-flow: row;
}

將網(wǎng)格項(xiàng)放在網(wǎng)格上時(shí)沸手，只能為其中的兩個(gè)指定位置：

CSS 代碼:

.item-a {
  grid-column:  1;
  grid-row:  1  /  3;
}
.item-e {
  grid-column:  5;
  grid-row:  1  /  3;
}

因?yàn)槲覀儼?grid-auto-flow設(shè)成了 row ，所以我們的網(wǎng)格看起來會(huì)是這樣注簿。注意 我們沒有進(jìn)行定位的網(wǎng)格項(xiàng)（item-b契吉，item-c，item-d）會(huì)這樣排列在可用的行中：

image

相反地诡渴，如果我們把 grid-auto-flow設(shè)成了 column 捐晶，item-b，item-c，item-d會(huì)沿著列向下排列：

.container {
  display: grid;
  grid-template-columns:  60px  60px  60px  60px  60px;
  grid-template-rows:  30px  30px;
  grid-auto-flow: column;
}

image

13. grid

在一個(gè)聲明中設(shè)置所有以下屬性的簡寫： grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow惑灵。它還將grid-column-gap 和 grid-column-gap設(shè)置為初始值山上，即使它們不可以通過grid屬性顯式地設(shè)置。

值：

• none：將所有子屬性設(shè)置為其初始值
• <grid-template-rows> / <grid-template-columns>：將 grid-template-rows和 grid-template-columns 分別設(shè)置為指定值英支，將所有其他子屬性設(shè)置為其初始值
• <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ] ：分別接受所有與 grid-auto-flow佩憾，grid-auto-rows和 grid-auto-columns 相同的值。如果省略了 grid-auto-columns干花，它被設(shè)置為由 grid-auto-rows 指定的值妄帘。如果兩者都被省略，他們就會(huì)被設(shè)置為初始值

.container {
  grid: none |  <grid-template-rows>  /  <grid-template-columns>  |  <grid-auto-flow>  [<grid-auto-rows>  [/  <grid-auto-columns>]];
}

例子：

以下兩個(gè)代碼塊是等效的：

.container {
  grid:  200px  auto  /  1fr  auto  1fr;
}

.container {
  grid-template-rows:  200px  auto;
  grid-template-columns:  1fr  auto  1fr;
  grid-template-areas: none;
}

以下兩個(gè)代碼塊也是等效的：

.container {
  grid: column 1fr  /  auto;
}

.container {
  grid-auto-flow: column;
  grid-auto-rows:  1fr;
  grid-auto-columns:  auto;
}

它也接受一個(gè)更復(fù)雜但相當(dāng)方便的語法來一次設(shè)置所有內(nèi)容池凄。您可以 grid-template-areas寄摆，grid-template-rows和grid-template-columns，并所有其他的子屬性都被設(shè)置為它們的初始值修赞。這么做可以在它們網(wǎng)格區(qū)域內(nèi)相應(yīng)地指定網(wǎng)格線名字和網(wǎng)格軌道的大小婶恼。用最簡單的例子來描述：

.container {
  grid:  "header header header"  1fr  
           "footer footer footer"  25px 
          /  auto  50px  auto;
}

等價(jià)于：

.container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: 1fr  25px ;
  grid-template-columns: auto 50px auto;    
}

子元素 網(wǎng)格項(xiàng)(Grid Items) 屬性

1. grid-column-start / grid-column-end / grid-row-start / grid-row-end

通過指定 網(wǎng)格線(grid lines) 來確定網(wǎng)格內(nèi) 網(wǎng)格項(xiàng)(grid item) 的位置。 grid-column-start/ grid-row-start是網(wǎng)格項(xiàng)目開始的網(wǎng)格線柏副，grid-column-end / grid-row-end 是網(wǎng)格項(xiàng)結(jié)束的網(wǎng)格線勾邦。
值：

• <line> ：可以是一個(gè)數(shù)字引用一個(gè)編號(hào)的網(wǎng)格線，或者一個(gè)名字來引用一個(gè)命名的網(wǎng)格線

• span <number> ：該網(wǎng)格項(xiàng)將跨越所提供的網(wǎng)格軌道數(shù)量

• span <name> ：該網(wǎng)格項(xiàng)將跨越到它與提供的名稱位置

• auto ：表示自動(dòng)放置割择，自動(dòng)跨度眷篇，默認(rèn)會(huì)擴(kuò)展一個(gè)網(wǎng)格軌道的寬度或者高度

示例：

.item-a {
    grid-column-start: 2;
    grid-column-end: five;
    grid-row-start: row1-start
    grid-row-end: 3
}

網(wǎng)格項(xiàng)位置，grid-column-start荔泳，grid-column-end蕉饼，grid-row-start，grid-row-end 的示例

.item-b {
  grid-column-start:  1;
  grid-column-end: span col4-start;
  grid-row-start:  2
  grid-row-end: span 2
}

網(wǎng)格項(xiàng)位置玛歌，grid-column-start昧港，grid-column-end，grid-row-start支子，grid-row-end 的示例

如果沒有聲明指定 grid-column-end / grid-row-end创肥，默認(rèn)情況下，該網(wǎng)格項(xiàng)將占據(jù)1個(gè)軌道值朋。

項(xiàng)目可以相互重疊叹侄。您可以使用 z-index 來控制它們的重疊順序。

2. grid-column / grid-row

分別為 grid-column-start+ grid-column-end 和 grid-row-start + grid-row-end的縮寫形式昨登。

值：

• <start-line> / <end-line>：每個(gè)網(wǎng)格項(xiàng)都接受所有相同的值趾代，作為普通書寫的版本，包括跨度

.item {
  grid-column:  <start-line>  / <end-line> | <start-line> / span <value>;
  grid-row:  <start-line>  / <end-line> | <start-line> / span <value>;
}

示例：

.item-c {
  grid-column:  3  / span 2;
  grid-row: third-line /  4;
}

image

如果沒有聲明分隔線結(jié)束位置丰辣，則該網(wǎng)格項(xiàng)默認(rèn)占據(jù) 1 個(gè)網(wǎng)格軌道撒强。

3. grid-area

為網(wǎng)格項(xiàng)提供一個(gè)名稱丈甸，以便可以 被使用網(wǎng)格容器 grid-template-areas屬性創(chuàng)建的模板進(jìn)行引用。 另外尿褪，這個(gè)屬性可以用作grid-row-start+ grid-column-start + grid-row-end+ grid-column-end的縮寫睦擂。

值：

• <name>：你所選的名稱
• <row-start> / <column-start> / <row-end> / <column-end>：數(shù)字或分隔線名稱

.item {
  grid-area:  <name>  |  <row-start>  / <column-start> /  <row-end>  /  <column-end>;
}

示例：

作為為網(wǎng)格項(xiàng)分配名稱的一種方法：

.item-d {
  grid-area: header
}

作為grid-row-start + grid-column-start + grid-row-end + grid-column-end屬性的縮寫形式

.item-d {
  grid-area:  1  / col4-start /  last-line /  6
}

image

4. justify-self

沿著 行軸線(row axis) 對(duì)齊 網(wǎng)格項(xiàng) 內(nèi)的內(nèi)容（ 相反的屬性是 align-self，沿著列軸線(column axis)對(duì)齊）杖玲。此值適用于單個(gè)網(wǎng)格項(xiàng)內(nèi)的內(nèi)容顿仇。

值：

• start：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的左側(cè)
• end：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的右側(cè)
• center：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的中間（水平居中）
• stretch：填充整個(gè)網(wǎng)格區(qū)域的寬度（這是默認(rèn)值）

示例：

.item-a {
  justify-self: start;
}

image

.item-a {
  justify-self:  end;
}

image

.item-a {
  justify-self: center;
}

image

.item-a {
  justify-self: stretch;
}

image

要為網(wǎng)格中的所有網(wǎng)格項(xiàng)設(shè)置 行軸線(row axis) 線上對(duì)齊方式，也可以在 網(wǎng)格容器 上設(shè)置 justify-items屬性摆马。

5. align-self

沿著 列軸線(column axis) 對(duì)齊 網(wǎng)格項(xiàng) 內(nèi)的內(nèi)容（ 相反的屬性是 justify-self 臼闻，沿著 行軸線(row axis) 對(duì)齊）。此值適用于單個(gè)網(wǎng)格項(xiàng)內(nèi)的內(nèi)容囤采。

值：

• start：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的頂部
• end：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的底部
• center：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的中間（垂直居中）
• stretch：填充整個(gè)網(wǎng)格區(qū)域的高度（這是默認(rèn)值）

.item{
  align-self: start |  end  | center | stretch;
}

示例：

.item-a {
  align-self: start;
}

image

.item-a {
  align-self:  end;
}

</pre>

image

.item-a {
  align-self: center;
}

image

.item-a {
  align-self: stretch;
}

image

要為網(wǎng)格中的所有網(wǎng)格項(xiàng)設(shè)置 列軸線(column axis) 上的對(duì)齊方式述呐，也可以在 網(wǎng)格容器 上設(shè)置 align-items屬性。