CSS Grid 布局

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>：可以是長(zhǎng)度值，百分比，或者等份網(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() 表示法來簡(jiǎn)化定義：

.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>：長(zhǎng)度值

示例：

.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>：可以是長(zhǎng)度值，百分比，或者等份網(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è)置所有以下屬性的簡(jiǎn)寫： 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)格軌道的大小。用最簡(jiǎn)單的例子來描述：

.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屬性。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 227,572評(píng)論 6贊 531
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 98,071評(píng)論 3贊 414
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 175,409評(píng)論 0贊 373
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)。經(jīng)常有香客問我，道長(zhǎng)，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 62,569評(píng)論 1贊 307
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 71,360評(píng)論 6贊 404
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 54,895評(píng)論 1贊 321
城市分裂傳說
那天，我揣著相機(jī)與錄音，去河邊找鬼。笑死，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 42,979評(píng)論 3贊 440
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 42,123評(píng)論 0贊 286
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 48,643評(píng)論 1贊 333
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 40,559評(píng)論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 42,742評(píng)論 1贊 369
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,250評(píng)論 5贊 356
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 43,981評(píng)論 3贊 346
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,363評(píng)論 0贊 25
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,622評(píng)論 1贊 280
情欲美人皮
我被黑心中介騙來泰國(guó)打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個(gè)月前我還...
沈念sama閱讀 51,354評(píng)論 3贊 390
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 47,707評(píng)論 2贊 370

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

CSS Grid 布局

CSS Grid 布局

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

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

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

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

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

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

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

1. display

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

3.grid-template-areas

4. grid-template

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

6. grid-gap

7. justify-items

8. align-items

9. justify-content

10. align-content

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

12. grid-auto-flow

13. grid

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

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

2. grid-column / grid-row

3. grid-area

4. justify-self

5. align-self

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

CSS Grid 布局

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

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

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

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

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

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

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

1. display

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

3.grid-template-areas

4. grid-template

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

6. grid-gap

7. justify-items

8. align-items

9. justify-content

10. align-content

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

12. grid-auto-flow

13. grid

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

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

2. grid-column / grid-row

3. grid-area

4. justify-self

5. align-self

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

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

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