轉自：https://blog.jirengu.com/?p=990
CSS網格布局（又名“網格”）是一個二維的基於網格的布局系統，其目的只在於完全改變我們設計基於網格的用戶界面的方式。 CSS一直用來布局網頁，但一直都不完美。 一開始我們使用table 做布局，然后轉向浮動、定位以及inline-block，但所有這些方法本質上都是 Hack 的方式，並且遺漏了很多重要的功能（例如垂直居中）。 Flexbox的出現在一定程度上解決了這個問題，但是它的目的是為了更簡單的一維布局，而不是復雜的二維布局（Flexbox和Grid實際上一起工作得很好）。 只要我們一直在制作網站，我們就一直在為解決布局問題不斷探索，
而Grid是第一個專門為解決布局問題而生的CSS模塊。
有兩個東西，啟發我寫這篇指南。 第一個是雷切爾·安德魯（Rachel Andrew）的書為CSS Grid布局准備。 這本書對網格布局做了徹底、清晰的介紹，也是是整篇文章的基礎，我強烈建議你購買並閱讀他的書。 我的另一個重要靈感是Chris Coyier的Flexbox完全指南，當需要查閱 flexbox 的一切資料時我就會找這篇文章。 這篇文章幫助了很多人學習 Flex 布局，也是 Google 上搜索“flexbox”關鍵字排名第一的文章。你會發現他的文章和我的很多相似之處，有最好的范例在那放着為什么咱不偷師學着寫呢？
本指南的目的是介紹網格概念，因為它們存在於最新版本的規范中。 因此我不會覆蓋過時的IE語法，而且隨着規范的成熟，我會盡最大努力保存更新本指南。
基礎知識以及瀏覽器支持情況
一開始你需要使用display：grid把容器元素定義為一個網格，使用grid-template-columns和grid-template-rows設置列和行大小，然后使用grid-column 和 grid-row把它的子元素放入網格。 與flexbox類似，網格子元素的原始順序不重要。 你的可以在 CSS 里以任意順序放置它們，這使得使用媒體查詢重新排列網格變得非常容易。 想象一下，我們需要定義整個頁面的布局，然后為了適應不同的屏幕寬度完全重新排列，我們只需要幾行CSS就能實現這個需求。 網格是有史以來最強大的CSS模塊之一。
截至2017年3月，許多瀏覽器都提供了原生的、不加前綴的對CSS Grid的支持，比如 Chrome（包括Android），Firefox，Safari（包括iOS）和Opera。 另一方面，Internet Explorer 10和11支持它，但需要使用過時的語法。 Edge瀏覽器已經宣布將支持標准的Grid語法，但暫未支持。
瀏覽器支持的詳細數據可在Caniuse查看。其中里面的數字表示該版本以上的瀏覽器支持Grid。
桌面瀏覽器
| Chrome | Opera | Firefox | IE | Edge | Safari |
|---|---|---|---|---|---|
| 57 | 44 | 52 | 11* | 16 | 10.1 |
移動端 / 平板
| iOS Safari | Opera Mobile | Opera Mini | Android | Android Chrome | Android Firefox |
|---|---|---|---|---|---|
| 10.3 | No | No | 62 | 62 | 57 |
除了微軟之外，瀏覽器制造商在 Grid 規范完全落地以前似乎並沒有放手讓 Gird 野生也長的打算。 這是一件好事，這意味着我們不需要再去學習各種瀏覽器兼容版本的舊語法。
在生產環境中使用Grid只是時間問題，但現在是我們該學習的時候了。
重要術語
在深入了解網格的概念之前，理解術語是很重要的。 由於這里所涉及的術語在概念上都是相似的，如果不先記住它們在網格規范中定義的含義，則很容易將它們彼此混淆。 但是不用太擔心，這些術語並不多。
Grid Container
設置了 display: gird 的元素。 這是所有 grid item 的直接父項。 在下面的例子中，.container 就是是 grid container。
<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 容器的孩子（直接子元素）。下面的 .item 元素就是 grid item，但 .sub-item不是。
<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 Cell
兩個相鄰的行和兩個相鄰的列網格線之間的空間。它是網格的一個“單元”。 下面是行網格線1和2之間以及列網格線2和3的網格單元。
Grid Area
四個網格線包圍的總空間。 網格區域可以由任意數量的網格單元組成。 下面是行網格線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 contaienr，並為其內容建立新的網格格式化上下文(grid formatting context)。
值:
- grid – 生成一個塊級(block-level)網格
- inline-grid – 生成一個行級(inline-level)網格
- subgrid – 如果你的 grid container 本身就是一個 grid item（即,嵌套網格），你可以使用這個屬性來表示你想從它的父節點獲取它的行/列的大小，而不是指定它自己的大小。
.container { display: grid | inline-grid | subgrid; } 注意：column, float, clear, 以及 vertical-align 對一個 grid container 沒有影響
grid-template-columns / grid-template-rows
使用以空格分隔的多個值來定義網格的列和行。這些值表示軌道大小(track size)，它們之間的空格代表表格線(grid line)。
.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; grid-template-rows: 25% 100px auto; } 
但你可以給網格線指定確切的命名。 注意中括號里的網格線命名語法：
.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]; } 
需要注意的是，一個網格線可以有不止一個名字。例如，這里第2條網格線有兩個名字：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 item 為 grid container 寬度的三分之一：
.container { grid-template-columns: 1fr 1fr 1fr; } 自由空間是在排除所有不可伸縮的 grid item 之后計算得到的。 在下面的示例中，fr單位可用的自由空間總量不包括50px:
.container { grid-template-columns: 1fr 50px 1fr 1fr; } grid-template-areas
通過引用 grid-area屬性指定的網格區域的名稱來定義網格模板。 重復網格區域的名稱導致內容擴展到這些單元格。 點號表示一個空單元格。 語法本身提供了網格結構的可視化。
值：
<grid-area-name>– 使用 grid-area 屬性設置的網格區域的名稱.– 點號代表一個空網格單元- 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"; } 這將創建一個四列寬三行高的網格。 整個第一行將由 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 的簡寫。
值：
- 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
指定網格線的大小，你可以把它想象為設置列/行之間的間距的寬度。
值：
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-row-gap 和 grid-column-gap 的縮寫
.container { grid-gap: <grid-row-gap> <grid-column-gap>; } Example:
.container { grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; grid-gap: 10px 15px; } 如果沒有指定 grid-row-gap，則會被設置為與 grid-column-gap 相同的值。
justify-items
沿着行軸對齊網格內的內容（與之對應的是 align-items, 即沿着列軸對齊），該值適用於容器內的所有的 grid items。
值：
- start: 內容與網格區域的左端對齊
- end: 內容與網格區域的右端對齊
- center: 內容位於網格區域的中間位置
- stretch: 內容寬度占據整個網格區域空間(這是默認值)
.container { justify-items: start | end | center | stretch; } 舉例：
.container { justify-items: start; } 
.container{ justify-items: end; } 
.container { justify-items: center; } 
.container { justify-items: stretch; } 
也可以通過給單個 grid item 設置justify-self屬性來達到上述效果。
align-items
沿着列軸對齊grid item 里的內容（與之對應的是使用 justify-items 設置沿着行軸對齊），該值適用於容器內的所有 grid items。
值：
- start: 內容與網格區域的頂端對齊
- end: 內容與網格區域的底部對齊
- center: 內容位於網格區域的垂直中心位置
- stretch: 內容高度占據整個網格區域空間(這是默認值)
.container { align-items: start | end | center | stretch; } 舉例:
.container { align-items: start; } 
.container { align-items: end; } 
.container { align-items: center; } 
.container { align-items: stretch; } 
也可以通過給單個 grid item 設置align-self屬性來達到上述效果。
justify-content
有時，網格的總大小可能小於其網格容器的大小。如果你的所有 grid items 都使用像px這樣的非彈性單位來設置大小，則可能發生這種情況。此時，你可以設置網格容器內的網格的對齊方式。 此屬性沿着行軸對齊網格（與之對應的是 align-content, 沿着列軸對齊）。
值：
- start – 網格與網格容器的左邊對齊
- end – 網格與網格容器的右邊對齊
- center – 網格與網格容器的中間對齊
- stretch – 調整g rid item 的大小，讓寬度填充整個網格容器
- space-around – 在 grid item 之間設置均等寬度的空白間隙，其外邊緣間隙大小為中間空白間隙寬度的一半
- space-between – 在 grid item 之間設置均等寬度空白間隙，其外邊緣無間隙
- space-evenly – 在每個 grid item 之間設置均等寬度的空白間隙，包括外邊緣
.container { justify-content: start | end | center | stretch | space-around | space-between | space-evenly; } 舉例：
.container { justify-content: start; } 
.container { justify-content: end; } 
.container { justify-content: center; } 
.container { justify-content: stretch; } 
.container { justify-content: space-around; } 
.container { justify-content: space-between; } 
.container { justify-content: space-evenly; } 
align-content
有時，網格的總大小可能小於其網格容器的大小。如果你的所有 grid items 都使用像px這樣的非彈性單位來設置大小，則可能發生這種情況。此時，你可以設置網格容器內的網格的對齊方式。 此屬性沿着列軸對齊網格（與之對應的是 justify-content, 即沿着行軸對齊）。
值：
- start – 網格與網格容器的頂部對齊
- end – 網格與網格容器的底部對齊
- center – 網格與網格容器的中間對齊
- stretch – 調整 grid item 的大小，讓高度填充整個網格容器
- space-around – 在 grid item 之間設置均等寬度的空白間隙，其外邊緣間隙大小為中間空白間隙寬度的一半
- space-between – 在 grid item 之間設置均等寬度空白間隙，其外邊緣無間隙
- space-evenly – 在每個 grid item 之間設置均等寬度的空白間隙，包括外邊緣
.container { align-content: start | end | center | stretch | space-around | space-between | space-evenly; } 舉例：
.container { align-content: start; }
.container { align-content: end; } 
.container { align-content: center; } 
.container { align-content: stretch; } 
.container { align-content: space-around; } 
.container { align-content: space-between; } 
.container { align-content: space-evenly; } 
grid-auto-columns / grid-auto-rows
指定自動生成的網格軌道（又名隱式網格軌道）的大小。 隱式網格軌道在你顯式的定位超出指定網格范圍的行或列（使用 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 來定位你的網格項目，如下所示：
.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 item，則自動放置算法會自動放置這些項目。 而該屬性則用於控制自動布局算法的工作方式。
值：
- row – 告訴自動布局算法依次填充每行，根據需要添加新行
- column – 告訴自動布局算法依次填充每列，根據需要添加新列
- dense – 告訴自動布局算法，如果后面出現較小的 grid item，則嘗試在網格中填充空洞
.container { grid-auto-flow: row | column | row dense | column dense } 需要注意的是，dense 可能導致您的 grid item 亂序。
舉例， 考慮如下 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; } 當把 grid item 放在網格上時，你只把其中兩個設置了固定的位置：
.item-a { grid-column: 1; grid-row: 1 / 3; } .item-e { grid-column: 5; grid-row: 1 / 3; } 因為我們將 grid-auto-flow 設置為row，所以我們的grid就像這樣。 注意觀察我們沒有做設置的三個項目（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。 它同時也將 sets grid-column-gap 和 grid-row-gap 設置為它們的初始值，即使它們不能被此屬性顯示設置。
值：
- 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)的屬性
grid-column-start / grid-column-end / grid-row-start /grid-row-end
使用特定的網格線確定 grid item 在網格內的位置。grid-column-start/grid-row-start 屬性表示grid item的網格線的起始位置，grid-column-end/grid-row-end屬性表示網格項的網格線的終止位置。
值：
<line>: 可以是一個數字來指代相應編號的網格線，也可使用名稱指代相應命名的網格線span <number>: 網格項將跨越指定數量的網格軌道span <name>: 網格項將跨越一些軌道，直到碰到指定命名的網格線- auto: 自動布局， 或者自動跨越， 或者跨越一個默認的軌道
.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 } 
.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>– 每個值的用法都和屬性分開寫時的用法一樣
.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; } 
如果沒有指定結束行值，則該網格項默認跨越1個軌道。
grid-area
給 grid item 進行命名以便於使用 grid-template-areas 屬性創建模板時來進行引用。另外也可以做為 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的簡寫形式。
值：
<name>– 你的命名<row-start>/<column-start>/<row-end>/<column-end>– 可以是數字，也可以是網格線的名字
.item { grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>; } 舉例:
給一個網格項命名
.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 } 
justify-self
沿着行軸對齊grid item 里的內容（與之對應的是 align-self, 即沿列軸對齊）。 此屬性對單個網格項內的內容生效。
值：
- start – 將內容對齊到網格區域的左端
- end – 將內容對齊到網格區域的右端
- center – 將內容對齊到網格區域的中間
- stretch – 填充網格區域的寬度 (這是默認值)
舉例：
.item-a { justify-self: start; } 
.item-a { justify-self: end; } 
.item-a { justify-self: center; } 
.item-a { justify-self: stretch; } 
要為網格中的所有grid items 設置對齊方式，也可以通過 justify-items 屬性在網格容器上設置此行為。
align-self
沿着列軸對齊grid item 里的內容（與之對應的是 justify-self, 即沿行軸對齊）。 此屬性對單個網格項內的內容生效。
值：
- start – 將內容對齊到網格區域的頂部
- end – 將內容對齊到網格區域的底部
- center – 將內容對齊到網格區域的中間
- stretch – 填充網格區域的高度 (這是默認值)
.item { align-self: start | end | center | stretch; } 舉例:
.item-a { align-self: start; } 
.item-a { align-self: end; } 
.item-a { align-self: center; } 
.item-a { align-self: stretch; } 
要為網格中的所有grid items 統一設置對齊方式，也可以通過 align-items 屬性在網格容器上設置此行為。