+ display:grid 指定乙個容器採用網格布局 ，採用網格布局的區域，稱為"容器"（container）。容器內部採用網格定位的子元素，稱為"專案"（item）。
一、容器屬性
預設情況下 容器元素都是塊級元素，但也可以設定成行內元素
display:inline-block
note:設定網格布局後，容器子元素（專案）的float、display:inline-block、 display:table-cell、 vertical-align 和column-*等設定都將失效
2、grid-template-columns 屬性
grid-template-rows屬性
容器指定網格布局以後，接著就要劃分行和列. gri-template-columns屬性定義每一列的列寬 ，grid-template-rows 屬性定義每一行行高
1.contain
(1) repeat()
引數重複寫非常麻煩，可以使用repeat()函式，簡化重複值， repeat()接受兩個引數，第乙個引數是重複次數，第二個引數是重複值
1.contain
6//或
7.contain
(2) auto-fill 關鍵字
有的時候單元格大小是固定，但是容器的大小不確定。如果希望每一行（或沒一列）容納盡可能多的單元格，這時可以使用auto-fill關鍵字
(3) fr關鍵字
網格布局提供fr關鍵字（fraction的縮寫，意為「片段」） 。如果兩列寬度為1fr 和2fr,就表示後面是前者的兩倍
1.contain
(4)minmax()
minmax()函式產生乙個長度範圍，表示長度在這個範圍之內，它接受兩個引數，分別最小值和最大值
1.contain
(5)auto 關鍵字
auto 關鍵字表示由瀏覽器自己決定長度
1.contain
(6)網格線名稱
grid-template-columns 屬性 和grid-template-rows 屬性裡面，還可以使用方括號，指定每一根網格的名稱，方便以後的引用
1.contain
note:網格布局允許同一條線多個名字比如 [c1 c2]
(7) 布局例項
grid-template-columns 屬性 和grid-template-rows 屬性 值可以使用百分比
1.contain
3.grid-row-grap屬性 grid-column-gap屬性 grid-gap屬性
grid-row-gap屬性設定行與行的間隔（行間距），grid-column-gap屬性設定列與列間隔（列間距）
1.contain
note:grip-gap 屬性 grip-row-gap 和 grip-column-gap的合併寫法
grip-gap:
4、grid-template-areas 屬性
網格布局允許指定 "區域"（area）,乙個區域由單個或多個單元格組成，grid-template-areas屬性用於自定義區域
1.contain
5、grid-auto-flow 屬性
劃分網格以後，容器的子元素會按照順序，自動放置在每一塊網格。預設的放置順序是先行後列，即先填滿第一行，在開始放入第二行
note: grid-auto-flow 屬性決定，預設值 row ,即先行後列。也可以設定成cloumn ,變成先列後行
1.contain910
11/*
或 */
12.contain
note:grid-auto-flow屬性除了設定成row 和 column ,還可以設定成 row dense 和 cloumn dense 。這兩個值主要用於專案指定位置以後剩餘位置的排列方式
1.contain
6、 justify-items屬性 align-items屬性 place-items屬性
justify-items屬性設定單元格內容的水平位置（左中右），align-items屬性設定單元格內容的垂直位置（上中下）
1.contain
note:pace-items 屬性 是align-items屬性和justify-items屬性合併寫法
如果第二個值省略，預設與第乙個值相等
7、justify-content 屬性內容區域水平位置（左中右），align-content 屬性內容區域垂直位置（上中下），
start:對齊容器的起始邊框。
end - 對齊容器的結束邊框。
center - 容器內部居中。
space-around - 每個專案兩側的間隔相等。所以，專案之間的間隔比專案與容器邊框的間隔大一倍。
space-between - 專案與專案的間隔相等，專案與容器邊框之間沒有間隔。
space-evenly - 專案與專案的間隔相等，專案與容器邊框之間也是同樣長度的間隔。
1.contain
note: place-content: align-content屬性 和 justify-content屬性的簡寫
8、grid-auto-columns 屬性， grid-auto-rows 屬性 瀏覽器用來設定多餘網格列寬和行高。它們的寫法與grid-template-columns和grid-template-rows完全相同。如果不指定這兩個屬性，瀏覽器完全根據單元格內容的大小，決定新增網格的列寬和行高。
1.contain
9、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、grid-auto-flow這六個屬性的合併簡寫形式。
二、專案屬性
1、專案位置可以指定，具體方法就是指定專案四個邊框，分別定位在哪根線上
gird-column-start 屬性 :左邊框所在垂直網格線
grid-column-end 屬性 ：右邊框所在垂直網格
grid-row-start 屬性 ：上邊框所在水平網格
grid-row-end 屬性 ：下邊框所在水平網格
1.bgcolor2
(1) span 關鍵字
這四個屬性可以使用span 關鍵字，表示「跨越」，即左右邊框（上下邊框）跨越多少個網格
1.grid1
note :這四個屬性產生專案的重疊，使用z-
2.grid-column屬性 ，grid-row 屬性
grid-column屬性是 grid-colum-start屬性 和gird-column-end屬性的合併簡寫
grid-row 屬性是 grid-row-start屬性 和grid-row-end 屬性的合併寫法
1.grid2
6//等價於
7.grid2
note:斜桿以及後面可以省略，預設跨域乙個網格
3、grid-area屬性 指定專案放在哪乙個區域
1.grid2
note:grid-area屬性還可以用作grid-row-start 、 grid-column-start 、grid-row-end 、 grid-column-end 的合併簡寫直接指定專案位置
grid-area: / / / ;
4、justify-self 屬性，align-self熟悉， place-self屬性
justify-self屬性，設定單元格內容的水平位置（左中右），和justify-items屬性用法一致但只用於單個專案
align-self屬性，設定單元格內容垂直位置（上中下），和align-items屬性用法一致，也只用於單個專案
(1)這兩個屬性都可以去四個值
start:對齊單元格起始邊緣
end:對其單元格結束邊緣
center:單元格內部居中
stretch:拉伸，佔滿整個單元格（預設值）
1.grid2
note:place-self 屬性是 align-self屬性 和justify-self屬性合併寫法
如果第二個值省略則會認為兩個值相等。
css grid布局的首次使用
首先來看一下效果圖 接下來廢話不多說，先上 doctype html html lang en head meta charset utf 8 title document title style box a.b c.d e.f gstyle head body div class box div ...
css grid布局筆記
grid布局 網格布局，通過在父元素上設定display grid 來設定乙個網格容器，內部的子元素採用網格的方式進行布局。fr單位 css自適應單位 在grid布局中如果一行分為四列，其中一列為固定width 100px，其他列都為1fr，那麼1fr 100 100px 3。單元格 行和列形成的區...
CSS Grid 網格 布局
grid template columns grid template rows grid template areas grid template grid column gap grid row gap grid gap justify items align items justify con...