? 網(wǎng)格布局，一種突破一維空間的布局思路，引入“行”和“列”的概念在二維空間中實(shí)現(xiàn)樣式效果。其強(qiáng)大的網(wǎng)頁空間分配能力，是連Flex在內(nèi)的所有布局方式都未有過的。它與Flex具有一定的相似性，都可以指定容器內(nèi)多個項(xiàng)目的位置，但又有很大的不同?？梢哉J(rèn)為，Grid 遠(yuǎn)比 “Flex” 強(qiáng)大。

? 類似上圖的網(wǎng)頁布局模型，是Grid布局的拿手好戲。圖中對應(yīng)的名稱，在網(wǎng)格布局中被稱作“區(qū)域名”。本文偏干貨，想查看更多使用案例，可閱讀Learn CSS Grid一文
?

# 概念須知

• 容器：承載網(wǎng)格布局的那個空間，用來存放網(wǎng)格布局的子元素。一般最外層的容器是網(wǎng)頁的Container
• 項(xiàng)目：存在容器中的直接子元素，稱為“項(xiàng)目”。但間接子元素不是項(xiàng)目，Grid布局也不會對其生效。如需要生效，需要將該項(xiàng)目也設(shè)置為容器display: grid
• 單元格：行和列交叉的空間，稱為單元格。一個容器會被劃分出多個單元格，一個項(xiàng)目可占用一個或多個單元格
• 區(qū)域：可以對單元格指定名字，構(gòu)成區(qū)域。允許指定多個單元格相同名字，構(gòu)成一個區(qū)域。通常一個項(xiàng)目占用一個區(qū)域，但也不絕對。
• 網(wǎng)格線：分割出單元格的行列線條，稱為網(wǎng)格線。n行有n+1根水平網(wǎng)格線，m列有m+1根垂直網(wǎng)格線。網(wǎng)格線下標(biāo)從1開始（不從0開始）
  ?

網(wǎng)格布局屬性設(shè)置有兩大類:（1）容器屬性 （2）項(xiàng)目屬性。
設(shè)置網(wǎng)格布局后，以下幾個CSS屬性將失效：float，display: inline-block，display: table-cell，vertical-align，column-*

# 容器屬性字典

一、設(shè)置容器為網(wǎng)格布局

? 網(wǎng)格布局方法中，容器內(nèi)部的項(xiàng)目默認(rèn)是block類型的，如果需要展示為行內(nèi)塊級元素，可以設(shè)置為inline-grid

• display:
  （1） grid 默認(rèn)子元素是塊級元素
  （2）inline-grid 設(shè)置子元素是行內(nèi)塊級元素

二、劃分單元格及設(shè)置大小

• grid-template-columns:
  （1）100px 100px 100px 定義每一列寬度
  （2）repeat(3, 100px) 循環(huán)定義三次100px、repeat(2, 100px 50px) 循環(huán)100px 50px兩次
  （3）repeat(auto-fill, 100px) 自動填100px的單元格，放不下自動換行
  （4）1fr 2fr 100px 倍數(shù)關(guān)系，2列是1列的兩倍寬。3列固定為100px寬
  （5）1fr 2fr minmax(50px, 1fr) 第3列最窄50px，最寬1fr
  （6）100px auto 50px 除去1列和3列占的寬度，第2列自適應(yīng)占用剩余寬度
  （7）70% 30%兩列布局模型，repeat(24, 1fr)ElementUI十二個布局模型
  （8）[col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end] 使用[]給網(wǎng)列網(wǎng)格線命名
• grid-template-rows:
  （1）[row-1-start] 1fr [row-2-start] 1fr [row-2-end] 給列網(wǎng)格線命名
  （2）...同上...

(8) 與 (1) 的組合效果

三、給單元格分區(qū)域

? 同行命名的區(qū)域名中間以空格隔開，而不是逗號，點(diǎn)號表示跳過該單元格也就是不對該單元格命名區(qū)域。
? 值得關(guān)注的是，區(qū)域命名后，每個區(qū)域的起始網(wǎng)格線會自動命名為區(qū)域名-start，結(jié)束為區(qū)域名-end。水平網(wǎng)格線和垂直網(wǎng)格線具有相同的名稱

• grid-template-areas:
  （1）'a b c'
  ???'d e f'
  ???'g h i' 指定區(qū)域名稱，為直觀展示允許換行書寫
  （2）'a b c' 'd . e' 'f . g' 不使用的單元格使用點(diǎn)號 跳過
  （3）'header header header header' 'main main . asidebar' 'footer footer footer footer' 劃多個單元格為一個區(qū)域

(3) 的分區(qū)效果

四、設(shè)置項(xiàng)目間距

• row-gap:20px [grid-row-gap] 新標(biāo)準(zhǔn)，設(shè)置上下行項(xiàng)目間隔
• column-gap:20px [grid-column-gap] 新標(biāo)準(zhǔn)，設(shè)置左右列項(xiàng)目間隔
• gap: <row-gap> <column-gap>簡寫。[grid-gap] 新標(biāo)準(zhǔn)
  （1）20px 20px 上下間隔20px，左右間隔20px
  （2）20px 上下左右間隔20px

五、優(yōu)先排列方向

• grid-auto-flow:
  （1）row (默認(rèn))，優(yōu)先橫向排列
  （2）column，優(yōu)先縱向排列
  （3）row dense 稠密布局，除已指定區(qū)域的項(xiàng)目，其余項(xiàng)目優(yōu)先橫向自動占用未用的單元格
  （4）column dense 優(yōu)先縱向的稠密布局

(3) 的效果。否則因1后放不下2圖中3位置將留空

六、設(shè)置自動生成的單元格大小

? 有時候因布局需要，會空出某個單元格不用，如第一個項(xiàng)目需要顯示在第一行第二列單元格上，如果單元格數(shù)量與項(xiàng)目數(shù)量相同，就會剩余一個項(xiàng)目超出自動排列到最后一行。網(wǎng)格布局會自動再生成一個單元格來放這個項(xiàng)目。

• grid-auto-columns:100px 設(shè)置自動生成的單元格寬度為100px
• grid-auto-rows:100px 設(shè)置自動生成的單元格高度為100px

七、容器內(nèi)容的對齊方式

? 相對于display: grid的容器，其內(nèi)部元素作為一個整體相對于這個容器的對齊方式

• justify-content:
  （1）start 以起始網(wǎng)格線對齊
  （2）end 以結(jié)束網(wǎng)格線對齊
  （3）center 居中顯示
  （4）stretch 項(xiàng)目拉伸至單元格同寬
  （5）space-between 兩邊頂邊，項(xiàng)目間距均分
  （6）space-around 項(xiàng)目兩側(cè)間距相等（距邊距離是項(xiàng)目間的1/2）
  （7）space-evenly 距邊與項(xiàng)目間距相等的間距均分
  （8）...其余屬性不常用...
• align-content:
  （1）...同上...
  
  (6) 的顯示效果

八、單元格內(nèi)容對齊方式

? 容器中有一個或多個單元格，單元格內(nèi)部存放著項(xiàng)目，這些項(xiàng)目相對于單元格的對齊方式

• justify-items:
  （1）start 項(xiàng)目以單元格的起始網(wǎng)格線對齊
  （2）end 以結(jié)束網(wǎng)格線對齊
  （3）center 項(xiàng)目在單元格中居中顯示
  （4）stretch 項(xiàng)目拉伸占滿單元格寬度
  （5）...其余屬性不常用...
• align-items:
  （1）...同上...
  
  (1) 的顯示效果

九、終極簡寫

? 這個簡寫并不容易理解和維護(hù)，不推薦使用

• grid-template:
  ? 是<grid-template-columns> <grid-template-rows> <grid-template-areas>的簡寫
• grid:
  ? 是<grid-template-rows> <grid-template-columns> <grid-template-areas> <grid-auto-rows> <grid-auto-columns>的簡寫
  ?

# 項(xiàng)目屬性字典

一、項(xiàng)目內(nèi)容對齊方式

? 容器內(nèi)容對齊方式是justify-content，單元格內(nèi)容對齊方式是justify-items，項(xiàng)目內(nèi)容指的是在項(xiàng)目內(nèi)部的元素，相對于該項(xiàng)目的對齊方式。所以本屬性只會影響單個項(xiàng)目。前兩個屬性都會影響所有項(xiàng)目。

• justify-self:
  （1）start 項(xiàng)目內(nèi)容以項(xiàng)目起始位置對齊
  （2）end 項(xiàng)目內(nèi)容在項(xiàng)目結(jié)束位置對齊
  （3）center 項(xiàng)目內(nèi)容居中顯示
  （4）stretch 內(nèi)容拉伸占滿項(xiàng)目寬度
• align-self:
  （1）...同上...
  
  (2) 的顯示效果

二、設(shè)置項(xiàng)目占用空間

? 本屬性中，如果把一下四個網(wǎng)格線均設(shè)置了，其余未指定區(qū)域自動排列的項(xiàng)目會根據(jù)dense的規(guī)則自動進(jìn)行稠密布局。

• grid-column-start:
  （1）1 開始網(wǎng)格線的下標(biāo)（注意網(wǎng)格線下標(biāo)從1開始，而不是0）
  （2）header-start 開始網(wǎng)格線名稱
  （3）span 3 按默認(rèn)的開始位置，跨兩個單元格大小
• grid-column-end:
  （1）4 結(jié)束網(wǎng)格線的下標(biāo)（注意網(wǎng)格線下標(biāo)從1開始，而不是0）
  （2）header-end 結(jié)束網(wǎng)格線名稱
  （3）span 3 按默認(rèn)的開始位置，跨兩個單元格大小
• grid-row-start: 同 grid-column-start
• grid-row-end: 同 grid-column-end

簡寫辦法

• grid-column: <grid-column-start> <grid-column-end>簡寫，用/分隔
  （1）1 / 4 從第一條網(wǎng)格線到第三條網(wǎng)格線，即占用第一和第二單元格
  （2）1 / span 3 從第一條網(wǎng)格線開始，占用兩個單元格
  （3）1 從第一條網(wǎng)格線開始，占用一個單元格。相當(dāng)于省略了 span 1
• grid-row
  （1）1 / 3 從第一條到第三條
  （2）1 / span 2 從1開始跨兩格

(1) / (2) 的顯示效果

?

# 瀏覽器支持情況

? 作為比較新的技術(shù)方案，肯定會擔(dān)心支持性的問題，好在它已被廣泛的接受，某E 11 版本也已做了支持