上一篇，介紹了grid的瀏覽器兼容和重要的幾個概念，接下來繼續介紹grid的容器屬性。

Grid(網格) 屬性目錄

網格容器(Grid Container) 屬性

• display
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• justify-items
• align-items
• justify-content
• align-content
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• grid

網格項(Grid Items) 屬性

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• grid-area
• justify-self
• align-self

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

display

將元素定義為網格容器，并為其內容建立新的 網格格式上下文。

值：

• grid ：生成一個塊級網格
• inline-grid ：生成一個內聯網格
• subgrid ：如果你的網格容器本身是另一個網格的網格項（即嵌套網格），你可以使用這個屬性來表示
  你希望它的行/列的大小繼承自它的父級網格容器，而不是自己指定的。

如果你想要設置為網格容器元素本身已經是網格項（嵌套網格布局），用這個屬性指明這個容器內部的網格項的行列尺寸直接繼承其父級的網格容器屬性。

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

注意：在 網格容器(Grid Container) 上使用column，float，clear， vertical-align 不會產生任何效果。

grid-template-columns / grid-template-rows

使用空格分隔的值列表，用來定義網格的列和行。這些值表示 網格軌道(Grid Track) 大小，它們之間的空格表示網格線。

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

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

示例：

當你在 網格軌道(Grid Track) 值之間留出空格時，網格線會自動分配數字名稱：

.container{
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
}

分隔線名稱

但是你可以明確的指定網格線(Grid Line)名稱，即 <line-name> 值。請注意網格線名稱的括號語法：

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

分隔線名稱

請注意，一條網格線(Grid Line)可以有多個名稱。例如，這里的第二條 行網格線(row grid lines) 將有兩個名字：row1-end 和row2-start ：

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

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

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

上面的代碼等價于：

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

fr 單元允許你用等分網格容器剩余可用空間來設置 網格軌道(Grid Track) 的大小 。例如，下面的代碼會將每個網格項設置為網格容器寬度的三分之一：

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

剩余可用空間是除去所有非靈活網格項之后計算得到的。在這個例子中，可用空間總量減去 50px 后，再給 fr 單元的值3等分：

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

grid-template-areas

通過引用 grid-area 屬性指定的 網格區域(Grid Area) 名稱來定義網格模板。重復網格區域的名稱導致內容跨越這些單元格。一個點號（.）代表一個空的網格單元。這個語法本身可視作網格的可視化結構。

值：

• <grid-area-name>：由網格項的 grid-area 指定的網格區域名稱
• .（點號） ：代表一個空的網格單元
• none：不定義網格區域

.container {
  grid-template-areas: 
    " | . | none | ..."
    "...";
}

示例：

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}
 
.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";
}

上面的代碼將創建一個 4 列 3 行的網格。整個頂行將由 header 區域 組成。中間一排將由兩個 main 區域，一個是空單元格，一個 sidebar 區域組成。最后一行全是 footer 區域組成。

網格區域名稱模板

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

你可以使用任意數量的相鄰的 點. 來聲明單個空單元格。 只要這些點.之間沒有空隙隔開，他們就表示一個單一的單元格。

注意你 不是 用這個語法來命名網格線，只是命名網格區域。當你使用這種語法時，區域兩端的網格線實際上是自動命名的。如果你的網格區域的名字是 foo，該區域的起始 行網格線 和起始 列網格線 的名稱將是 foo-start，而最后一行 行網格線 和最后一列 列網格線 的名字是 foo-end。這意味著一些網格線可能有多個名字，如上例中最左邊的網格線，它將有三個名稱：header-start，main-start 和 footer-start 。

grid-template

用于定義 grid-template-rows ，grid-template-columns，grid-template-areas 縮寫 (shorthand) 屬性。

值：

• none：將所有三個屬性設置為其初始值
• subgrid：將grid-template-rows，grid-template-columns的值設為 subgrid，grid-template-areas設為初始值
• <grid-template-rows> / <grid-template-columns>：將 grid-template-columns 和 grid-template-rows設置為相應地特定的值，并且設置grid-template-areas為none

.container {
  grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
}

這個屬性也接受一個更復雜但相當方便的語法來指定三個上訴屬性。這里有一個例子：

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

等價于：

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

由于 grid-template不會重置 隱式 網格屬性（grid-auto-columns， grid-auto-rows， 和 grid-auto-flow），
這可能是你想在大多數情況下做的，建議使用 grid屬性而不是 grid-template。

grid-column-gap / grid-row-gap

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

值：

• <line-size> ：長度值

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

示例：

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

網格單元間距

只能在 列/行 之間創建間距，網格外部邊緣不會有這個間距。

grid-gap

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

值：

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

.container {
  grid-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 的值。例如下面的代碼是等價的：

.container{
  /* 設置 [`grid-column-gap`](http://www.css88.com/archives/8510#prop-grid-column-row-gap) 和 [`grid-row-gap`](http://www.css88.com/archives/8510#prop-grid-column-row-gap) */  
  grid-column-gap: 10px;
  grid-column-gap: 10px; 
 
  /* 等價于 */  
  grid-gap: 10px 10px;
 
  /* 等價于 */  
  grid-gap: 10px;
}

justify-items

沿著 行軸線(row axis) 對齊 網格項(grid items) 內的內容（相反的屬性是 align-items沿著列軸線對齊）。該值適用于容器內的所有網格項。

值：

• start：將內容對齊到網格區域(grid area)的左側
• end：將內容對齊到網格區域的右側
• center：將內容對齊到網格區域的中間（水平居中）
• stretch：填滿網格區域寬度（默認值）

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

示例：

.container {
  justify-items: start;
}

左對齊，justify-items 設置為 start 的例子

.container{
  justify-items: end;
}

右對齊，justify-items 設置為 end 的例子

.container{
  justify-items: center;
}

居中對齊，justify-items 設置為 center 的例子

.container{
  justify-items: stretch;
}

拉伸，justify-items 設置為 stretch 的例子

這些行為也可以通過單獨網格項(grid items) 的 justify-self屬性設置。

align-items

沿著 列軸線(column axis) 對齊 網格項(grid items) 內的內容（相反的屬性是 justify-items沿著行軸線對齊）。該值適用于容器內的所有網格項。

值：

• start：將內容對齊到網格區域(grid area)的頂部
• end：將內容對齊到網格區域的底部
• center：將內容對齊到網格區域的中間（垂直居中）
• stretch：填滿網格區域高度（默認值）

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

示例：

.container {
  align-items: start;
}

頂部對齊，align-items 設置為 start 的例子

.container {
  align-items: end;
}

底部對齊，align-items 設置為 end 的例子

.container {
  align-items: center;
}

居中對齊，align-items 設置為 center 的例子

.container {
  align-items: stretch;
}

拉伸，align-items 設置為 stretch 的例子

這些行為也可以通過單獨網格項(grid items) 的 align-self屬性設置。

justify-content

有時，你的網格合計大小可能小于其 網格容器(grid container) 大小。 如果你的所有 網格項(grid items) 都使用像 px 這樣的非靈活單位設置大小，在這種情況下，您可以設置網格容器內的網格的對齊方式。 此屬性沿著 行軸線(row axis) 對齊網格（相反的屬性是 align-content，沿著列軸線對齊網格）。

值：

• start：將網格對齊到 網格容器(grid container) 的左邊
• end：將網格對齊到 網格容器 的右邊
• center：將網格對齊到 網格容器 的中間（水平居中）
• stretch：調整 網格項(grid items) 的寬度，允許該網格填充滿整個 網格容器 的寬度
• space-around：在每個網格項之間放置一個均勻的空間，左右兩端放置一半的空間
• space-between：在每個網格項之間放置一個均勻的空間，左右兩端沒有空間
• space-evenly：在每個柵格項目之間放置一個均勻的空間，左右兩端放置一個均勻的空間

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

示例：

.container {
  justify-content: start;
}

左側對齊，justify-content 設置為 start 的例子

.container {
  justify-content: end;
}

右側對齊，justify-content 設置為 end 的例子

.container {
  justify-content: center;
}

居中對齊，justify-content 設置為 center 的例子

.container {
  justify-content: stretch;
}

拉伸，justify-content 設置為 stretch 的例子

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

justify-content 設置為 space-around 的例子

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

justify-content 設置為 space-between 的例子

CSS 代碼:

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

justify-content 設置為 space-evenly 的例子

align-content

有時，你的網格合計大小可能小于其 網格容器(grid container) 大小。 如果你的所有 網格項(grid items) 都使用像 px 這樣的非靈活單位設置大小，在這種情況下，您可以設置網格容器內的網格的對齊方式。 此屬性沿著 列軸線(column axis) 對齊網格（相反的屬性是 justify-content，沿著行軸線對齊網格）。

值：

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

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

示例：

.container {
  align-content: start;  
}

頂部對齊，align-content 設置為 start 的例子

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

底部對齊，align-content 設置為 end 的例子

.container {
  align-content: center;   
}

居中對齊，align-content 設置為 center 的例子

.container {
  align-content: stretch;  
}

拉伸，align-content 設置為 stretch 的例子

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

align-content 設置為 space-around 的例子

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

align-content 設置為 space-between 的例子

CSS 代碼:

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

align-content 設置為 space-evenly 的例子

grid-auto-columns / grid-auto-rows

指定任何自動生成的網格軌道(grid tracks)（又名隱式網格軌道）的大小。在你明確定位的行或列（通過 grid-template-rows / grid-template-columns），超出定義的網格范圍時，隱式網格軌道被創建了。

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

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

為了說明如何創建隱式網格軌道，請考慮一下以下的代碼：

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

網格模板

生成了一個2×2的網格。

但現在想象一下，你使用 grid-column和 grid-row 來定位你的網格項（grid items），像這樣：

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

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

隱式網格軌道示例

我們告訴 .item-b 從第 5 條列網格線開始到第 6 條列網格線結束，但我們從來沒有定義過 第5 或 第6 列網格線。
因為我們引用的網格線不存在，所以創建寬度為 0 的隱式網格軌道以填補空缺。我們可以使用 grid-auto-columns和 grid-auto-rows 來指定這些隱式軌道的大小：

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

隱式網格軌道示例

grid-auto-flow

如果你有一些沒有明確放置在網格上的網格項(grid items)，自動放置算法 會自動放置這些網格項。該屬性控制自動布局算法如何工作。

值：

• row：告訴自動布局算法依次填充每行，根據需要添加新行
• column：告訴自動布局算法依次填入每列，根據需要添加新列
• dense：告訴自動布局算法在稍后出現較小的網格項時，嘗試填充網格中較早的空缺

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

請注意，dense 集可能導致你的網格項出現亂序。

示例：

考慮以下 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>

你定義一個有 5 列和 2 行的網格，并將 grid-auto-flow設置為 row（也就是默認值）：

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

將網格項放在網格上時，只能為其中的兩個指定位置：

CSS 代碼:

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

因為我們把 grid-auto-flow設成了 row ，所以我們的網格看起來會是這樣。注意 我們沒有進行定位的網格項（item-b，item-c，item-d）會這樣排列在可用的行中：

自動放置算法

相反地，如果我們把 grid-auto-flow設成了 column ，item-b，item-c，item-d會沿著列向下排列：

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

自動放置算法

grid

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

值：

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

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

例子：

以下兩個代碼塊是等效的：

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

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

以下兩個代碼塊也是等效的：

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

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

它也接受一個更復雜但相當方便的語法來一次設置所有內容。您可以 grid-template-areas，grid-template-rows和grid-template-columns，并所有其他的子屬性都被設置為它們的初始值。這么做可以在它們網格區域內相應地指定網格線名字和網格軌道的大小。用最簡單的例子來描述：

.container {
  grid:  [row1-start]  "header header header"  1fr  [row1-end]
           [row2-start]  "footer footer footer"  25px  [row2-end]
          /  auto  50px  auto;
}

等價于：

.container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}

下一篇 繼續介紹網格項(Grid Items) 屬性。