CSS Grid(網(wǎng)格) 布局（又稱為 “Grid(網(wǎng)格)” ），是一個二維的基于網(wǎng)格的布局系統(tǒng)它的目標是完全改變我們基于網(wǎng)格的用戶界面的布局方式。CSS 一直用來布局我們的網(wǎng)頁，但一直以來都存在這樣或那樣的問題。一開始我們用表格（table），然后是浮動（float），再是定位（postion）和內(nèi)嵌塊（inline-block），但是所有這些方法本質(zhì)上都是只是 hack 而已，并且遺漏了很多重要的功能（例如垂直居中）。Flexbox 的出現(xiàn)很大程度上改善了我們的布局方式，但它的目的是為了解決更簡單的一維布局，而不是復雜的二維布局（實際上 Flexbox 和 Grid 能結(jié)合在一起工作，而且配合得非常好）。Grid(網(wǎng)格) 布局是第一個專門為解決布局問題而創(chuàng)建的 CSS 模塊.

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

display

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

grid-template-columns / grid-template-rows

用來定義網(wǎng)格的列和行。這些值表示 網(wǎng)格大小。

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

grid-template-areas

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

• <grid-area-name>：由網(wǎng)格項的 grid-area 指定的網(wǎng)格區(qū)域名稱

• .（點號） ：代表一個空的網(wǎng)格單元
  

• none：不定義網(wǎng)格區(qū)域

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

grid-column-gap / grid-row-gap

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

• <line-size> ：長度值

grid-gap

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

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

justify-items

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

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

align-items

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

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

justify-content

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

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

align-content

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

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

grid-auto-columns / grid-auto-rows

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

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

子元素 網(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)格軌道的寬度或者高度

grid-column / grid-row

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

• <start-line> / <end-line>：每個網(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ù)字或分隔線名稱

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ū)域的寬度（這是默認值）

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ū)域的高度（這是默認值）