上一篇，介紹了grid的網(wǎng)格容器屬性，接下來繼續(xù)介紹grid的網(wǎng)格項 屬性。

網(wǎng)格項(Grid Items) 屬性

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

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

grid-column-start / grid-column-end / grid-row-start / grid-row-end

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

值：

• <line> ：可以是一個數(shù)字引用一個編號的網(wǎng)格線，或者一個名字來引用一個命名的網(wǎng)格線
• span <number> ：該網(wǎng)格項將跨越所提供的網(wǎng)格軌道數(shù)量
• span <name> ：該網(wǎng)格項將跨越到它與提供的名稱位置
• auto ：表示自動放置，自動跨度，默認會擴展一個網(wǎng)格軌道的寬度或者高度

.item {
    grid-column-start: <number> | <name> | span <number> | span <name> | auto
    grid-column-end: <number> | <name> | span <number> | span <name> | auto
    grid-row-start: <number> | <name> | span <number> | span <name> | auto
    grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

示例：

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

網(wǎ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)格項位置，grid-column-start，grid-column-end，grid-row-start，grid-row-end 的示例

如果沒有聲明指定 grid-column-end / grid-row-end，默認情況下，該網(wǎng)格項將占據(jù)1個軌道。

項目可以相互重疊。您可以使用 z-index 來控制它們的重疊順序。

grid-column / grid-row

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

值：

• <start-line> / <end-line>：每個網(wǎ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;
}

網(wǎng)格項位置縮寫形式

如果沒有聲明分隔線結(jié)束位置，則該網(wǎng)格項默認占據(jù) 1 個網(wǎng)格軌道。

grid-area

為網(wǎng)格項提供一個名稱，以便可以 被使用網(wǎng)格容器 grid-template-areas屬性創(chuàng)建的模板進行引用。 另外，這個屬性可以用作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)格項分配名稱的一種方法：

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

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

justify-self

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

值：

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

示例：

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

左對齊，將 justify-self 設(shè)置為 start 的例子

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

右對齊，將 justify-self 設(shè)置為 end 的例子

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

水平居中對齊，將 justify-self 設(shè)置為 center 的例子

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

填充寬度，將 justify-self 設(shè)置為 stretch 的例子

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

align-self

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

值：

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

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

示例：

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

頂部對齊，將 align-self 設(shè)置為 start 的例子

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

</pre>

底部對齊，將 align-self 設(shè)置為 end 的例子

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

垂直居中對齊，將 align-self 設(shè)置為 center 的例子

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

填充高度，將 align-self 設(shè)置為 stretch 的例子

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

(完)