css3中的grid布局學習
基本概念
我們這里用我們最熟悉城市街道來理解這些概念。
- 網格容器
一個元素應用網格布局屬性后就變成了網格容器，它是由一組水平線和垂直線交叉構成，就如果我們所在的地區有小區和各個路構成。
- 網格線
使用Grid布局在顯式網格中定義軌道的同時會創建網格線。網格線有水平和垂網格線。也就是東西路段和南北路段的馬路。正常情況下
n行會有n+1根橫向網格線，m列有m+1根縱向網格線。比如田字就是就好像是一個三條水平線和三條垂直線構成的網格元素。
- 網格軌道
網格軌道 是兩條網格線之間的空間。
- 行
即兩個水平網格線之間的空間，也就是水平軌道，就好比我們面朝北邊東西方向橫向排列的樓房稱為行。
- 列
即兩個垂直網格線之間的空間，也就是垂直軌道，也就是南北方向排列的樓房
- 單元格
由水平線和垂直線交叉構成的每個區域稱為單元格，網絡單元格是CSS網格中的最小單元。也就是說東西和南北方向的路交叉后划分出來的土地區域
- 區域
網格區域是網格中由一個或者多個網格單元格組成的一個矩形區域。本質上，網格區域一定是矩形的。例如，不可能創建T形或L形的網格區域。
- 網格間距
是網格軌道之間的間距，這里一般值得是列和列，行和行之間的間距
- 什么是網格項目
在網格中的所有子元素統稱為網格項目，這里只包括子元素，不包括子元素的后代元素。也就是每個區塊中的建築物我們成為網格項
應用於父級規則
display
通過給元素設置：
display:grid | inline-grid，可以讓一個元素變成網格布局元素
語法：
display: grid | inline-grid;
參數說明：
grid：表示把元素定義為塊級網格元素，單獨占一行;inline-grid：表示把元素定義為行內塊級網格元素，可以和其他塊級元素在同一行。
grid-template-rows 、grid-template-columns
rows 用來規定網格容器的每一行的高度和橫向網格線的名稱，columns用來規定網格容器的每一列的寬度和縱向網格線的名稱
他們的語法相同，所以一起說明
語法：
grid-template-rows: <track-size> ... | <line-name> <track-size> ... ;
grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;
語法示例：
/* Keyword value */
grid-template-rows: 100px 1fr;
grid-template-rows: [linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);
/* <track-list> values */
grid-template-rows: none;
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows: minmax(100px, max-content) repeat(auto-fill, 200px) 20%;
grid-template-rows: [linename1] 100px [linename2] repeat(auto-fit, [linename3 linename4] 300px) 100px;
grid-template-rows: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3];
/* Global values */
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: unset;
案例說明： https://codepen.io/qwguo88/full/voOdMK
我們通過上邊案例分析一下取值詳情：
none
這個關鍵字表示不明確的網格。所有的行和其大小都將由
grid-auto-rows屬性隱式的指定。
如上圖所示，是借助谷歌開發者工具查看，在我們只設置grid-template-rows: auto;和grid-template-columns: auto;屬性的情況下，網格項橫向100%鋪滿網格容器，然后縱向排列分部，高度按照項目個數平均分配網格容器總高度。
length
非負值的長度大小。列（寬度）或者行（高度）值可以是用css絕對單位如：
px、em、rem等。
圖上所示，我們設置了grid-template-rows: 100px 50px 200px;和grid-template-columns: 150px 300px 500px;表示把網格容器划分成三行三列的網格，當划分列的寬度總合寬於容器寬度並不會自動換到下一行而且溢出，相應的划分的行總和也一樣。
percentage
非負值且相對於網格容器的 <百分比>
%。 如果網格容器的尺寸大小依賴網格軌道的大小（比如 inline-grid ），則百分比值將被視為auto。
我們在開發的過程中更多的是使用百分百來設置網格划分項，上圖是通過設置%+auto的值來划分grid-template-rows: 30% 40% auto;和grid-template-columns: 40% auto 50%;表示把網格容器划分成三行三列，第一行占網格容器的高度的30%，第二行占40%,剩下的高度分配給auto也就是100%-(40%+30%)=30%，同樣的列也是如此計算
flex
非負值，用單位
fr（fraction 的縮寫，意思是"分數"）。表示網格按照給定數字來等分行或者列，當我們划分的行或列單位都用fr的時候表示把網格划分出指定等分
上圖中我們給的值為：grid-template-rows: 1fr 2fr 3fr;和grid-template-columns: 2fr 5fr 1fr;表示三行三列的網格，其中把行分成5等份第一行占1/5第二行占2/5第三行占3/5，把列分成8等份第一列占2/8第二列占5/8第三列占1/8
上圖中我們給的值為：grid-template-rows: 1fr 200px;和grid-template-columns: auto 200px 10% 2fr 3fr;表示兩行五列的網格，其中第二行是200像素，第一行占總高度減去200px后的1份，在這個例子中就是300(總高度)-200=100,1fr就是100px高度；
列的分配是：第二列是固定的200px，第三列是占總寬度的10%也就是82px，在同時有fr和auto單位的行或列中計算比較特殊，這里的第一列是auto表示取這一列中最多的內容寬度這里就是child-6字符的站位寬，第四列和第五列分別是2fr和2fr表示把剩余的寬度分成5份，一個占剩余寬度的2/5一個占剩余寬度的3/5，在這個例子中表示(820-'child-6字符寬(53)'-200-(820/10))/5 = 97剩余寬度的每一份就是97，第四列就是97*2=194，第五列就是97*3=291
min-content、max-content
一個用來表示以網格項的最大的最小內容來占據網格軌道的關鍵字。
一個用來表示以網格項的最大的內容來占據網格軌道的關鍵字。
| chrome | firefox |
|---|---|
 |
 |
上圖中案例使用：grid-template-rows: 1fr 100px;和grid-template-columns: repeat(2, min-content max-content minmax(min-content, max-content));表示兩行六列的網格；其中行不用說，這里主要說列，列使用了repeat函數來重復；
- 第一列和第四列使用的是關鍵字
min-content表示此列的寬度應用此列最寬的單元格中最小內容寬度，怎么理解呢就是這一列中能夠自動換行后的最寬文字或者單詞，從圖上可以看出，Chrome瀏覽器第一列中在字符child-后面進行了換行然后取的child-這個字符的站位寬度，Firefox瀏覽器沒有在child-后換行。但是在第四列中因為有中文所以兩個瀏覽器都執行了換行，但是換行的位置有所不同。 - 第二列和第五列使用的是關鍵字
max-content表示此列的寬度應用此列最寬的單元格最大內容寬度，意思是內容盡量不自定換行然后取最大內容字符的寬度作為此列的寬度。 - 第三列和第六列使用的是minmax()函數定義列寬，里邊最大最小值也是應用了
min-content和max-content這里去的是最大內容寬度
repeat()
此方法可以讓我們用一種簡單快捷的方式划分比較多而且有規律的網格單元格，比如說我們要划分一個1行12列網格，如果我們划分的列寬很有規律，我沒必要寫12遍
-
此方法語法：
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) -
參數說明
positive-integer：表示要重復的track-list規則次數auto-fit：用於不確定列的情況下，當track-list規則指定的所有子元素寬度之和不大於網格容器總寬度時平均拉升子元素填充剩余空間auto-fill：用於不確定列的情況下，當track-list規則指定的所有子元素寬度之和不大於網格容器總寬度時子元素不拉升填充剩余空間
-
圖例：
上圖案例中我們給的值為：grid-template-rows: repeat(2, 100px);和grid-template-columns: repeat(2, 100px 1fr auto);表示兩行六列的網格，其中兩行的高度都是100px，這里使用repeat()函數表示重復定義，第一個參數表示重復次數，第二個參數表示要重復的值，多個值用空格隔開，案例表示划分2行每行都是100像素的行，從圖上可以看出兩行高度加起來不大於網格容器高度所以空出來留給網格中多出來的子項目；其中六列的寬度分別是第一列和第四列寬度為100px第三列和第六列寬度為該列中最長字符占位寬度，第二列和第五列寬度為(820-(100px*2)-('child-3'字符寬+'child-6'字符寬)/2)，第二個參數為多個值得時候表示按照循序分配第一個參數的次數。
上圖案例中取值為：grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 我們使用auto-fit關鍵字不固定列，同時每一列寬度最小值為100px最大值為1fr，因為子項取最小值總合加起來不大於容器寬度，所以每個子項都拉升填滿整個容器。
上圖案例中取值為：grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 我們使用auto-fill關鍵字不固定列，同時每一列寬度最小值為100px最大值為1fr，每個子項取最小值綜合加起來不大於容器寬度，這個時候繼續按照最小值分隔列，直到剩余寬度不大於100px，然后所以每個子項再平均分隔剩余空間。
minmax(min, max)
此方法表示取值一個范圍，最小值和最大值，大於等於min值，並且小於等於max值。如果max值小於min值，則該值會被視為min值。最大值可以設置為網格軌道系數值
，但最小值則不行。
上圖案例中我們使用minmax()函數定義值：grid-template-rows: minmax(100px, 1fr) 150px;和grid-template-columns: repeat(2, 100px 1fr minmax(100px, auto));表示兩行六列的網格，其中行中因為有固定值,所以第二行高度150px，然后第一行中的minmax()方法再根據剩余空間計算取值，如果剩余高度大於最小值100px那么就取1fr，如果剩余高度小於最小值100px那么高度取100px，當此方法第二個參數是固定值時，如果剩余高度大於這個固定值，那么高度取最大值得固定值。
fit-content()
字面理解是
fit適合后面跟內容，就是適合內容寬度，這里我測試的是不超過給定值得寬度（當給定寬度不大於內容最小寬度時會超過），同時固定值分配寬度后的剩余寬度小於給定值時候自動縮小寬度但是不能小於換行后的最寬項的最小內容寬度。
| Chrome | Firefox |
|---|---|
 |
 |
上圖案例中我們使用fit-content()函數定義列值：grid-template-columns: fit-content(10px) fit-content(70px) 50% 35%;表示第一列按內容計算寬度最大值為10px但是截圖中第一列的換行后的最小寬度child-字符已經超過10px所以寬度取值為child-字符寬度，第二列給定按內容計算寬度最大值為70px這個時候此列取值為70px並且此列的所有項都能在70px內換行，第三列寬度是固定的總寬度的50%：820px*0.5=410px，第四列寬度是總寬度的30%：820px*0.35=287px；
[line-name]
定義垂直和水平線的名稱，同時可以使用多個名字來命名一條分隔線，多個名字之間用空格分開，給分隔線命名的字符必須用
[]括起來，網格線的作用是為了網格中網格項目的定位使用。
grid-template-rows: [row-one-start] 30% [row-one-end row-two-start] 40% [row-two-end row-three-start] auto [row-three-end];
grid-template-columns: repeat(3, 33% [col-line]);
上面的代碼定義了三行三列的網格那么網格線分別有4條橫向和4條縱向，並且給網格線起了名字。
分別表示給橫向網格線的第一條線命名為row-one-start，第二條網格線命名為兩個名字row-one-end和row-tow-start，第三條網格線命名為row-two-end和row-three-start，第四條網格線命名為row-three-end；縱向使用了repeat()方法重復定義了三列，同時四條縱向的網格線名稱都定義為了相同的名稱col-line。
當我們不給網格線定義名稱的情況下瀏覽器會從1開始自動遞增生成網格線名稱，我們可以借助下圖查看
上圖是截取的Firefox的調試工具，可以看出最左邊的第一條縱向線名稱為1，最上邊的第一條橫向網格線名稱也是1。
grid-template-areas
通過字面理解area是區域的意思，這個屬性的作用是給網格布局容器划分區域。
語法：grid-template-areas: "<grid-area-name> | . | none | ..." "...";
取值說明：
grid-area-name：給區域定義名稱，這里主要按照行來定義用雙引號或者單元號括起來代表一行，一行中多列可以定義相同的名稱(代表同一個區塊)或不同名稱（代表不同區塊），名稱之間用空格分開，第二行.：表示空網格區塊none：表示沒有定義網格區塊名稱
案例說明： https://codepen.io/qwguo88/full/ZgBXoE
在這里我們借助Firefox工具查看我們定義的區塊划分：
在上圖中我們定義了：grid-template-areas: 'head head head' '. body-content body-right' 'foot foot none'，從圖中我們可以看到第一行划分了一個區塊，區塊名head占據三列，第二行划分了三個區塊左邊的是用.划分的空區塊，中間的區塊名：body-content，右邊的區塊名：body-right，第三行划分了兩個區塊，左邊的區塊名：foot占據兩列，右邊的區塊名：none沒有名稱占據一列
我們給定了網格區域名稱以后，可以通過給子元素（網格單元格）設置grid-area:head進行設置一個單元格所占空間，屬性名不用使用引號。
上圖是我們通過給子元素設置區塊名稱得到的效果，子元素設置區塊名我們將在后面進行介紹。
grid-template
grid-template是grid-template-row、grid-template-column、grid-template-area的簡寫形式
語法：
/* 值為關鍵詞 */
grid-template: none;
/* 為 grid-template-rows / grid-template-columns */
grid-template: 100px 1fr / 50px 1fr;
grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template: fit-content(100px) / fit-content(40%);
/* 為 grid-template-areas grid-template-rows / grid-template-column */
grid-template: "a a a"
"b b b";
grid-template: "a a a" 20%
"b b b" auto;
grid-template: [header-top] "a a a" [header-bottom]
[main-top] "b b b" 1fr [main-bottom]
/ auto 1fr auto;
/* 為全局值 */
grid-template: inherit;
grid-template: initial;
grid-template: unset;
案例說明： https://codepen.io/qwguo88/full/ZgBXoE
從案例中可以看到，grid-template定義行或者列要簡單很多 行和列之間用/分開，前面的部分是定義的grid-template-rows后面的部分是定義的grid-template-columns，還可以只定義區塊，然后網格會根據給定的規則等比例划網格。
這里我們介紹一下引用區塊划分的代碼，效果圖如下
上圖引用的代碼是：grid-template: "a a c" "b b c";只給網格容器划分區塊，此代碼給網格容器划分了兩行三列，第一行的第一列和第二列合並成一個區塊，第二行的第一列和第二列合並成一個區塊，第一行的第三列和第二行的第三列豎向合並一個區塊。然后通過給子項目應用區塊。
上圖引用的代碼是：grid-template: "a a a" 40px "b c c" 40px "b c c" 40px / 1fr 1fr 1fr;代碼說明/前面的屬於行划分，第一行划分成一個區塊a高度為40px，第二行划分成兩個區塊b和c高度也是40px，第三行划分成兩個區塊b和c高度也是40px，第二行和第三行的第一列區塊屬於一個所以上下合並，第二行和第三行的第二列第三列區塊一樣整體合並。/后面的列規定按照整體寬度划分為三份每列的寬度是1/3。
grid-column-gap、grid-row-gap
此屬性分別定義列和列之間的間距、行和行之間的間距
| Chrome | Firefox |
|---|---|
 |
 |
圖上我們定義了：三行三列的網格，grid-row-gap: 10px;給行與行之間定義10px的間距，圖中我們借助Firefox可以看虛斜線的區域屬於行與行之間的間距區域。
| Chrome | Firefox |
|---|---|
 |
 |
圖上我們定義了：三行三列的網格，grid-column-gap: 10px;給列與列之間定義10px的間距，圖中我們借助Firefox可以看虛斜線的區域屬於列與列之間的間距區域。
grid-gap
他是
grid-column-gap和grid-row-gap的簡寫形式，如果提供一個值，那么應用於行和列的間距，如果提供兩個值需要用空格分開，空格前邊的是行間距，空格后邊的是列間距
上圖我們給的定義是：grid-gap: 20px 10px;表示網格的行間距是20px列間距是10px;
grid-auto-rows or grid-auto-columns
此屬性定義了，子項目的個數超出了我們定義的行和列的情況下，多出的子項目的寬度高度的尺寸大小；
上圖我們給定的規則是：grid-template-rows: 20px 30px 40px;和grid-auto-rows: 80px;，我們給網格元素划分了三行，每一行都給定了高度，網格中有5個子元素。從圖上可以看出前三個子深色虛線的行是我們規定好的高度，中間實線一下的淺色點虛線是應用的grid-auto-rows定義的80px高度。
| Chrome | Firefox |
|---|---|
 |
 |
要解釋grid-auto-columns屬性需要用區域定義屬性，上圖效果中我們定義了grid-template: 'a b c d e f g' / 90px 90px 90px;一行7個區域(隱式定義了7類)的網格，但是我們只定義了前三列90px的寬度，並且占據了前三個區域a、b、c，剩下的兩個子元素和多余的區域寬度將會應用我們定義的grid-auto-columns: 50px;；這是的chrome和Firefox表現一直，寬度都是50像素。
grid-auto-flow
控制子元素的排列順序，默認子元素排序是按照自左到右自上而下一行一行排列。
語法：
/* Keyword values */
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;
/* Global values */
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: unset;
取值說明：
row：按行順序排列，默認值，子元素出現的順序先填充行，第一行填充完畢，在填充第二行；column：按照列順序排列，子元素出現的順序先填充列，第一列填充完畢，在填充第二列dense：該關鍵字使用一種“稠密”堆積算法，如果后面出現了稍小的元素，則會試圖去填充網格中前面留下的空白。這樣做會填上稍大元素留下的空白，但同時也可能導致原來出現的次序被打亂。row dense：和dense值基本相同column dense：這個是縱向“稠密””堆積算法；
案例說明： https://codepen.io/qwguo88/full/OJyzQLj
對齊方式
基本布局分析完畢，我們來說一下網格容器中的對齊方式，網格中對齊方式有：
align-items
是指網格項目元素在單元格中的垂直呈現方式，是垂直拉伸顯示，還是上中下對齊
| chrome | Firefox |
|---|---|
 |
 |
我們還是可以借助上面的截圖圖片再結合下邊的案例來理解各個取值的區別，圖中虛線的位置代表的是網格的單元格，色塊代表的是網格項目
案例演示： https://codepen.io/qwguo88/full/jObYKzd
justify-items
是指網格項目元素在單元格中的水平呈現方式，是水平拉伸顯示，還是左中右對齊
| chrome | Firefox |
|---|---|
 |
 |
我們可以借助上面的截圖圖片再結合下邊的案例來理解各個取值的區別，圖中虛線的位置代表的是網格的單元格，色塊代表的是網格項目
案例演示： https://codepen.io/qwguo88/full/JjYMvMz
通過上邊的案例我們發現，一般使用 stretch、start、end、center這幾個值，stretch是默認值
place-items
此屬性是
align-items和justify-items的縮寫形式
語法
/* 單個值 */
place-items: center;
/* 兩個值 */
place-items: align-items justify-items;
說明：
如果是單個值的情況下，將應用於垂直和水平對齊，如果是兩個值的話需要用空格分開，前邊的表示垂直對齊，后邊的表示水平對齊。
| chrome | Firefox |
|---|---|
 |
 |
我們還是可以借助上面的截圖圖片再結合下邊的案例來理解各個取值的區別，圖中虛線的位置代表的是網格的單元格，色塊代表的是網格項目
案例演示： https://codepen.io/qwguo88/full/ExVoRJy
align-content
指的是把網格布局中的所以子項成一個整體，然后讓整體在網格容器中垂直對齊，這個需要兩行以上才能看到效果。
| center | start | end |
|---|---|---|
 |
 |
 |
我們還是結合上圖Firefox截圖理解各個支的表現形式。在圖上我們可以看到，取值為start的時候網格項整體會靠上顯示，取值為center的時候網格項整體的上邊會填充gap使其整體垂直居中顯示，取值為end的時候所取的gap會更大，使網格項整體靠下對齊。他可取的值還有很多，我們可以結合下邊的實例來查看效果。
案例展示：https://codepen.io/qwguo88/full/mdeXWxy
justify-content
指的是把網格布局中的所以子項成一個整體，然后讓整體在網格容器中水平對齊，這個需要兩列以上才能看到效果。
| center | start | end |
|---|---|---|
 |
 |
 |
我們還是結合上圖Firefox截圖理解各個支的表現形式。在圖上我們可以看到，取值為start的時候網格項整體會靠左顯示，取值為center的時候網格項整體的左邊會填充gap使其整體水平居中顯示，取值為end的時候所取的gap會更大，使網格項整體靠右對齊。他可取的值還有很多，我們可以結合下邊的實例來查看效果。
案例展示：https://codepen.io/qwguo88/full/ExVopyW
place-content
此屬性是
align-content和justify-content的縮寫形式
語法
/* 單個值 */
place-content: center;
/* 兩個值 */
place-content: align-content justify-content;
說明：
如果是單個值的情況下，將應用於垂直和水平對齊，如果是兩個值的話需要用空格分開，前邊的表示垂直對齊，后邊的表示水平對齊。
start | center | end
--- | ---
| 
| 
我們還是可以借助上面的截圖圖片再結合下邊的案例來理解各個取值的區別
案例演示： https://codepen.io/qwguo88/full/JjYpvex
grid
grid 是一個簡寫屬性，它可以用來設置以下屬性：顯式網格屬性
grid-template-rows、grid-template-columns和grid-template-areas， 隱式網格屬性grid-auto-rows、grid-auto-columns和grid-auto-flow， 間距屬性grid-column-gap和grid-row-gap。
語法：
/*最簡單理解*/
grid: row/column; /* / 先前面的都是指行，右邊的都指的是列*/
grid: [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>
grid: <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?
/* <'grid-template'> values */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
/* <'grid-template-rows'> /
[ auto-flow && dense? ] <'grid-auto-columns'>? values */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
<'grid-template-columns'> values */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
應用在網格項目上
grid-column-start、grid-column-end
指定網格項目從哪個縱向網格線開始，到那個縱向網格線結束，同時也可以設置誇多少列
語法：
grid-column-start: start-line-name | number | span number;
grid-column-end: end-line-name | number | span number;
start-line-name和end-line-name：表示縱向的網格線名稱；number：表示沒有給網格線起名的情況下使用數字表示；span：表示跨越的意思，后邊的數字表示跨越幾列；
結合案例和圖片我們來看一下具體用法：
案例展示：https://codepen.io/qwguo88/full/gOavJVo
圖我們還是借助Firefox開發者工具，我們在沒有設置網格線名稱的情況下顯示網格線的數字號，這樣可以更容易理解；此示例我們都是使用的三行三列的網格布局。
上圖中我們只設置了網格子項的grid-column-start屬性，
child-1我們設置了grid-column-start: 1;也就是此項列的開始位置是第1條縱向網格線，如果我們給網格線定義名稱我們這也可以使用網格線名字來標記，這里並沒有設置grid-column-end屬性，那么子項默認在第2條縱向網格線結束，占據一列位置，也就是得出結論只設置start但是沒設置end，默認end = start+1。child-2我們設置了grid-column-start: 3;此項從第3條縱向網格線開始，跨越一列結束在最后一條網格線。child-3我們也設置了grid-column-start: 3;此項從第3條網格線開始，由於第二個子元素已經占據了最后一列，所以這一個子項將從第二行開始計算，在第二行的第3條縱向網格線開始到第4個結束。這一字項的開始位置在不大於最后一個縱向線條數值，會自動換到下一列顯示。
上圖中我們只設置了網格子項的grid-column-end屬性，通過設置結束位置來布局子項位置，在只設置end的情況下start = end -1；同時他也是當占據一行的最后一列時，如果后邊元素結束位置不大於最后一個縱向線條數值，會自動換到下一列顯示。
上圖中我們設置得子項開始位置都超過了縱向線條得總個數，這個時候可以看出，給第一個設置了grid-column-start: 5;表示從第5條縱向網格線開始，由於沒設置end所以跨越一列，並且隱式給網格增加了兩列，此時后邊的項設置start位置的時候如果不大於5，那么會從第二行開始。
相應的grid-column-end也是同樣效果。
當兩個屬性結合使用表示，子元素左邊從第幾個網格線開始，右邊到第幾個線條結束，中間跨越開始和結束之間的列，如果結束的列大於網格縱向線條個數會自用增加隱式列。途中child-1設置了grid-column-start: 2; grid-column-end: 5;從第2個縱向線開始到第5個縱向線結束，所以中間自動增加一列。
上圖我們使用了關鍵字span表示跨幾列得意思。
child-1設置了grid-column-start: span 2;表示從默認的開始位置跨越兩列位置。child-2設置了grid-column-start: 2;grid-column-end: span 3;表示從第第2個縱向線開始結束線跨越3列，在這里也會隱式增加一列，因為總列數只有三列。
如果命名了網格線名稱，上邊的數字換成網格線對應的名稱就可以了，這里需要注意的是，如果給定一個沒有名稱的網格線，那么他會從最后一條網格線開始，相當於隱式增加列。
grid-row-start、grid-row-end
指定網格項目從哪個橫線網格線開始，到那個列橫線網格線結束，同時也可以設置誇多行
語法：
grid-row-start: start-line-name | number;
grid-row-end: end-line-name | number;
start-line-name和end-line-name：表示橫向的網格線名稱；number：表示沒有給網格線起名的情況下使用數字表示；span：表示跨越的意思，后邊的數字表示跨越幾行；
橫線網格線開始和結束和縱向基本差不多，只是在方向上有所不同，橫線網格會設置大於總橫線網格線會自用增加行數，他默認的grid-column-start是第1條縱向網格，他會總動在第列開始下一個子項等。
案例展示：https://codepen.io/qwguo88/full/mdexLRo
grid-row、grid-column
他們是一種縮寫形式，
grid-row是grid-row-start和grid-row-end的縮寫，grid-column是grid-column-start和grid-column-end的縮寫。中間值用/分割
語法：
grid-row: line-name | number
grid-row: line-name | number / line-name | number | span number
grid-column: line-name | number
grid-column: line-name | number / line-name | number | span number
案例展示：https://codepen.io/qwguo88/full/YzyLxLR
通過上邊的案例我的得知，當該屬性取一個值的時候表示start並且子項占一行或者一列；當end的值小於start值得時候，兩個值互換。
grid-area
語法：
grid-area: area-name;
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
name：表示區域的名稱；row-start和row-end：橫向網格線名稱；column-start和column-end：縱向網格線名稱；
案例展示：https://codepen.io/qwguo88/full/KKdRXLe
上圖是通過設置子項的grid-area: area-name，可以看出第一個子項占據了3列得區域也就是head區域，第二個子項占據第2行的第1列區域body-content，第三個子項占據第2行的后2列body-right，最后一個子項占據第3行的3列區域foot。
這里我們重點說一下使用第二種方式，圖上可以看出第一項子項使用grid-area: row-two-start / col-one-start /row-three-end /col-three-end;，雖然網格容器定義了區域，但是第一項還是按照grid-row和grid-column的形式占據區域。
單項對齊方式
justify-self
用於單獨設置子項的水平對齊方式
案例展示：https://codepen.io/qwguo88/full/PoPeOXB
上圖展示了各取值的展示效果。
align-self
用於單獨設置子項的垂直對齊方式
案例展示：https://codepen.io/qwguo88/full/gOazoLZ
上圖展示了各取值的展示效果。
place-self
place-self屬性是align-self和justify-self縮寫形式。第一個值指align-self，第二個值指justify-self。如果第二個值不存在，則第一個值也將用於該值。兩個值之間用空格分開。
案例展示：https://codepen.io/qwguo88/full/GRpdyEP
上圖展示了部分值得展示效果。
相關網站
grid可視化在線生成代碼
- 可以拖動增加刪除網格：https://grid.layoutit.com/