Grid 佈局 by Chris House

CSS Grid 佈局是 CSS 中最強大的佈局系統。與 flexbox 的一維佈局系統不一樣，CSS Grid 佈局是一個二維佈局系統，也就意味着它能夠同時處理列和行。經過將 CSS 規則應用於 父元素 (成爲 Grid Container 網格容器)和其 子元素（成爲 Grid Items 網格項），你就能夠輕鬆使用 Grid(網格) 佈局。

若是你剛剛接觸 CSS Grid 佈局，那麼我強烈建議你首先閱讀 《5分鐘學會 CSS Grid 佈局》這篇文章做爲你的最簡入門。當你對 CSS Grid 佈局有了基本的認識以後，再來閱讀這篇指南，而後閱讀 如何使用 CSS Grid 快速而又靈活的佈局 讓你體會 Grid 佈局真正的強大和靈活。

簡介

CSS Grid(網格) 佈局（又稱爲 「Grid(網格)」 ），是一個二維的基於網格的佈局系統它的目標是徹底改變咱們基於網格的用戶界面的佈局方式。CSS 一直用來佈局咱們的網頁，但一直以來都存在這樣或那樣的問題。一開始咱們用表格（table），而後是浮動（float），再是定位（postion）和內嵌塊（inline-block），可是全部這些方法本質上都是隻是 hack 而已，而且遺漏了不少重要的功能（例如垂直居中）。Flexbox 的出現很大程度上改善了咱們的佈局方式，但它的目的是爲了解決更簡單的一維佈局，而不是複雜的二維佈局（實際上 Flexbox 和 Grid 能結合在一塊兒工做，並且配合得很是好）。Grid(網格) 佈局是第一個專門爲解決佈局問題而建立的 CSS 模塊，咱們終於不須要想盡辦法hack 頁面佈局樣式了。

有兩個主要的事情啓發我建立了本指南。第一個是 Rachel Andrew 出色的書籍 爲CSS網格佈局作好準備。這本書完全，清晰的介紹 CSS Grid(網格) ，也是本指南的基礎。我強烈建議你購買並閱讀。另外一個靈感來自 Flexbox 完整指南 ，（愚人碼頭注：若是你讀英文吃力，能夠經過 CSS3 Flexbox屬性可視化指南 來學習，講的也很是好理解）這也是我學習 flexbox 常常前往的資源。這篇文章是幫助了不少人，顯然是由於 Google 「flexbox」 排名第一。你會發現它和個人文章有不少類似之處，爲何不跟從最好的呢？

本指南的目的是介紹存在於最新版本的規範中 Grid(網格) 概念。因此我不會覆蓋過期的 IE 語法，並且隨着規範的逐漸成熟，我會盡我最大的努力去更新這個指南。

基礎知識和瀏覽器支持

首先，你必須使用 display: grid 將容器元素定義爲一個 grid(網格) 佈局，使用 grid-template-columns 和 grid-template-rows 設置 列 和 行 的尺寸大小，而後經過 grid-column 和 grid-row 將其子元素放入這個 grid(網格) 中。與 flexbox 相似，網格項（grid items）的源順序可有可無。你的 CSS 能夠以任何順序放置它們，這使得使用 媒體查詢（media queries）從新排列網格變得很是容易。定義整個頁面的佈局，而後徹底從新排列布局以適應不一樣的屏幕寬度，這些都只須要幾行 CSS ，想象一下就讓人興奮。Grid(網格) 佈局是有史以來最強大的CSS模塊之一。

截至2017年3月，許多瀏覽器都提供了對 CSS Grid 的原生支持，並且無需加瀏覽器前綴：Chrome（包括 Android ），Firefox，Safari（包括iOS）和 Opera 。 另外一方面，Internet Explorer 10和11支持它，可是是一個過期的語法實現。 Edge 已經宣佈支持，但尚未到來。（愚人碼頭注：翻譯這篇文章時，Edge 16 已經支持）。

這個瀏覽器支持數據來自 Caniuse ，你能夠查看更多的細節。 數字表示支持以上功能的瀏覽器版本號。

桌面(Desktop) 瀏覽器

Chrome	Opera	Firefox	IE	Edge	Safari
57	44	52	11*	16	10.1

手機(Mobile) / 平板(Tablet)瀏覽器

iOS Safari	Opera Mobile	Opera Mini	Android	Android Chrome	Android Firefox
10.3	No	No	62	62	57

除了微軟以外，瀏覽器廠商彷佛尚未對 Grid(網格) 搞本身的一套實現（好比加前綴），直到規範徹底成熟。這是一件好事，由於這意味着咱們沒必要擔憂學習多個語法。

在生產中使用 Grid 只是時間問題。 但如今是學習的時候了。

重要術語

在深刻了解 Grid(網格) 的概念以前，理解術語是很重要的。因爲這裏涉及的術語在概念上都很類似，若是不先記住 Grid(網格) 規範定義的含義，很容易混淆它們。可是別擔憂，術語並很少。

網格容器(Grid Container)

應用 display: grid 的元素。這是全部網格項（Grid Items）的直接父級元素。在這個例子中，container 就是 網格容器(Grid Container)。

HTML 代碼:

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

網格項(Grid Item)

網格容器（Grid Container）的子元素（例如直接子元素）。這裏 item 元素就是網格項(Grid Item)，可是 sub-item 不是。

HTML 代碼:

<div class="container">
 <div class="item"></div>
 <div class="item">
  <p class="sub-item"></p>
 </div>
 <div class="item"></div>
</div>

網格線(Grid Line)

構成網格結構的分界線。它們既能夠是垂直的（「列網格線(column grid lines)」），也能夠是水平的（「行網格線(row grid lines)」），並位於行或列的任一側。例如，這裏的黃線就是一條列網格線。

網格軌道(Grid Track)

兩條相鄰網格線之間的空間。你能夠把它們想象成網格的列或行。下圖是第二條和第三條 行網格線 之間的 網格軌道(Grid Track)。

網格單元格(Grid Cell)

兩個相鄰的行和兩個相鄰的列網格線之間的空間。這是 Grid(網格) 系統的一個「單元」。下圖是第1至第2條 行網格線 和第2至第3條 列網格線 交匯構成的 網格單元格(Grid Cell)。

網格區域(Grid Area)

4條網格線包圍的總空間。一個 網格區域(Grid Area) 能夠由任意數量的 網格單元格(Grid Cell) 組成。下圖是 行網格線1和3，以及列網格線1和3 之間的網格區域。

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 ：若是你的網格容器自己是另外一個網格的網格項（即嵌套網格），你可使用這個屬性來表示
    你但願它的行/列的大小繼承自它的父級網格容器，而不是本身指定的。

若是你想要設置爲網格容器元素自己已是網格項（嵌套網格佈局），用這個屬性指明這個容器內部的網格項的行列尺寸直接繼承其父級的網格容器屬性。

CSS 代碼:

.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>：你能夠選擇的任意名稱

CSS 代碼:

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

示例：

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

CSS 代碼:

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

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

CSS 代碼:

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

CSS 代碼:

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

若是你的定義包含多個重複值，則可使用 repeat() 表示法來簡化定義：

CSS 代碼:

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

上面的代碼等價於：

CSS 代碼:

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

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

CSS 代碼:

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

剩餘可用空間是除去全部非靈活網格項以後計算獲得的。在這個例子中，可用空間總量減去 50px 後，再給 fr 單元的值3等分：

CSS 代碼:

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

回到目錄

grid-template-areas

經過引用 grid-area 屬性指定的 網格區域(Grid Area) 名稱來定義網格模板。重複網格區域的名稱致使內容跨越這些單元格。一個點號（.）表明一個空的網格單元。這個語法自己可視做網格的可視化結構。

值：

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

CSS 代碼:

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

示例：

CSS 代碼:

.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

CSS 代碼:

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

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

CSS 代碼:

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

等價於：

CSS 代碼:

.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> ：長度值

CSS 代碼:

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

示例：

CSS 代碼:

.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>：長度值

CSS 代碼:

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

示例：

CSS 代碼:

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

若是grid-row-gap沒有定義，那麼就會被設置爲等同於 grid-column-gap 的值。例以下面的代碼是等價的：

CSS 代碼:

.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：填滿網格區域寬度（默認值）

CSS 代碼:

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

示例：

CSS 代碼:

.container {
 justify-items: start;
}

CSS 代碼:

.container{
 justify-items: end;
}

CSS 代碼:

.container{
 justify-items: center;
}

CSS 代碼:

.container{
 justify-items: stretch;
}

這些行爲也能夠經過單獨網格項(grid items) 的 justify-self 屬性設置。

回到目錄

align-items

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

值：

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

CSS 代碼:

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

示例：

CSS 代碼:

.container {
 align-items: start;
}

CSS 代碼:

.container {
 align-items: end;
}

CSS 代碼:

.container {
 align-items: center;
}

CSS 代碼:

.container {
 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：在每一個柵格項目之間放置一個均勻的空間，左右兩端放置一個均勻的空間

CSS 代碼:

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

示例：

CSS 代碼:

.container {
 justify-content: start;
}

CSS 代碼:

.container {
 justify-content: end;
}

CSS 代碼:

.container {
 justify-content: center;
}

CSS 代碼:

.container {
 justify-content: stretch;
}

CSS 代碼:

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

CSS 代碼:

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

CSS 代碼:

.container {
 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：在每一個柵格項目之間放置一個均勻的空間，上下兩端放置一個均勻的空間

CSS 代碼:

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

示例：

CSS 代碼:

.container {
 align-content: start;
}

CSS 代碼:

.container {
 align-content: end;
}

CSS 代碼:

.container {
 align-content: center;
}

CSS 代碼:

.container {
 align-content: stretch;
}

CSS 代碼:

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

CSS 代碼:

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

CSS 代碼:

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

回到目錄

grid-auto-columns / grid-auto-rows

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

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

CSS 代碼:

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

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

CSS 代碼:

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

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

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

CSS 代碼:

.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 來指定這些隱式軌道的大小：

CSS 代碼:

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

回到目錄

grid-auto-flow

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

值：

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

CSS 代碼:

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

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

示例：

考慮如下 HTML :

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（也就是默認值）：

CSS 代碼:

.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會沿着列向下排列：

CSS 代碼:

.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 指定的值。若是二者都被省略，他們就會被設置爲初始值

CSS 代碼:

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

例子：

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

CSS 代碼:

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

CSS 代碼:

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

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

CSS 代碼:

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

CSS 代碼:

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

它也接受一個更復雜但至關方便的語法來一次設置全部內容。您能夠 grid-template-areas，grid-template-rows和grid-template-columns，並全部其餘的子屬性都被設置爲它們的初始值。這麼作能夠在它們網格區域內相應地指定網格線名字和網格軌道的大小。用最簡單的例子來描述：

CSS 代碼:

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

等價於：

CSS 代碼:

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

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

經過指定 網格線(grid lines) 來肯定網格內 網格項(grid item) 的位置。 grid-column-start / grid-row-start 是網格項目開始的網格線，grid-column-end / grid-row-end 是網格項結束的網格線。

值：

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

CSS 代碼:

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

示例：

CSS 代碼:

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

CSS 代碼:

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

若是沒有聲明指定 grid-column-end / grid-row-end，默認狀況下，該網格項將佔據1個軌道。

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

回到目錄

grid-column / grid-row

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

值：

• <start-line> / <end-line>：每一個網格項都接受全部相同的值，做爲普通書寫的版本，包括跨度

CSS 代碼:

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

示例：

CSS 代碼:

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

若是沒有聲明分隔線結束位置，則該網格項默認佔據 1 個網格軌道。

回到目錄

grid-area

爲網格項提供一個名稱，以即可以 被使用網格容器 grid-template-areas 屬性建立的模板進行引用。 另外，這個屬性能夠用做grid-row-start + grid-column-start + grid-row-end + grid-column-end 的縮寫。

值：

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

CSS 代碼:

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

示例：

做爲爲網格項分配名稱的一種方法：

CSS 代碼:

.item-d {
 grid-area: header
}

做爲grid-row-start + grid-column-start + grid-row-end + grid-column-end 屬性的縮寫形式

CSS 代碼:

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

回到目錄

justify-self

沿着 行軸線(row axis) 對齊 網格項 內的內容（ 相反的屬性是 align-self ，沿着列軸線(column axis)對齊）。此值適用於單個網格項內的內容。

值：

• start：將內容對齊到網格區域的左側
• end：將內容對齊到網格區域的右側
• center：將內容對齊到網格區域的中間（水平居中）
• stretch：填充整個網格區域的寬度（這是默認值）

示例：

CSS 代碼:

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

CSS 代碼:

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

CSS 代碼:

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

CSS 代碼:

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

要爲網格中的全部網格項設置 行軸線(row axis) 線上對齊方式，也能夠在 網格容器 上設置 justify-items 屬性。

回到目錄

align-self

沿着 列軸線(column axis) 對齊 網格項 內的內容（ 相反的屬性是 justify-self ，沿着 行軸線(row axis) 對齊）。此值適用於單個網格項內的內容。

值：

• start：將內容對齊到網格區域的頂部
• end：將內容對齊到網格區域的底部
• center：將內容對齊到網格區域的中間（垂直居中）
• stretch：填充整個網格區域的高度（這是默認值）

CSS 代碼:

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

示例：

CSS 代碼:

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

CSS 代碼:

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

CSS 代碼:

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

CSS 代碼:

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

要爲網格中的全部網格項設置 列軸線(column axis) 上的對齊方式，也能夠在 網格容器 上設置 align-items 屬性。