css之Grid Layout詳解
CSS Grid Layout擅長將頁面划分為主要區域，或者在從HTML基元構建的控件的各個部分之間定義大小，位置和圖層之間的關系。
與表格一樣，網格布局使作者能夠將元素對齊到列和行中。但是，CSS網格可能比使用表格更多或更容易布局。例如，網格容器的子元素可以自己定位，使它們實際重疊和分層，類似於CSS定位元素。
Grid Layout的基本概念
CSS Grid Layout為CSS引入了一個二維網格系統。網格可用於布局主要頁面區域或小型用戶界面元素。
什么是Grid？
網格是一組交叉的水平和垂直線 - 一組定義列，其他行。元素可以放在網格上，尊重這些列和行。CSS網格布局具有以下功能：
固定和靈活的軌道尺寸
您可以創建具有固定軌道大小的網格 - 例如使用像素。這會將網格設置為適合您所需布局的指定像素。您還可以使用具有百分比的靈活尺寸或fr為此目的設計的新單元創建網格。
物品放置
您可以使用行號，名稱或通過定位網格區域將項目放置在網格上的精確位置。網格還包含一種算法，用於控制未在網格上顯示位置的項目的放置。
創建附加曲目以保存內容
您可以使用網格布局定義顯式網格，但規范還會處理在聲明的網格之外添加的內容，這會在需要時添加其他行和列。包括添加“適合容器的多列”等功能。
對齊控制
網格包含對齊功能，以便我們可以控制項目放置到網格區域后的對齊方式，以及整個網格的對齊方式。
控制重疊內容
可以將多個項目放入網格單元格或區域中，它們可以彼此部分重疊。然后可以用z-index屬性控制該分層。
Grid是一個功能強大的規范，當與CSS的其他部分（如flexbox）結合使用時，可以幫助您創建以前無法在CSS中構建的布局。這一切都始於在網格容器中創建網格。
Grid容器
我們通過聲明或在元素上創建網格容器。一旦我們這樣做，該元素的所有直接子元素將成為網格項。display: griddisplay: inline-grid
grid-template-columns和grid-template-rows屬性在網格上定義列和行
例子：創建三個300px的格子
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>wrapper</title> 5 <meta charset="UTF-8"> 6 <style> 7 .wrapper { 8 display: grid; 9 grid-template-columns:300px 300px 300px ; 10 11 } 12 .one { 13 background-color: red; 14 } 15 .two { 16 background-color: skyblue; 17 } 18 .three { 19 background-color: pink; 20 } 21 .four{ 22 background-color: yellow; 23 } 24 .five{ 25 background-color: blue; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="wrapper"> 31 <div class="one">一</div> 32 <div class="two">二</div> 33 <div class="three">三</div> 34 <div class="four">四</div> 35 <div class="five">五</div> 36 </div> 37 38 </body> 39 </html>
fr單位
可以使用任何長度單位定義軌道。Grid還引入了一個額外的長度單元來幫助我們創建靈活的網格軌道。新fr單元表示網格容器中可用空間的一小部分。下一個網格定義將創建三個相等寬度的軌道，根據可用空間增長和縮小。
行或列固定了大小則按照剩余的空間進行分配
例子
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>wrapper</title> 5 <meta charset="UTF-8"> 6 <style> 7 .wrapper { 8 display: grid; 9 grid-template-columns:1fr 2fr 3fr; 10 11 12 } 13 .one { 14 background-color: red; 15 } 16 .two { 17 background-color: skyblue; 18 } 19 .three { 20 background-color: pink; 21 } 22 .four{ 23 background-color: yellow; 24 } 25 .five{ 26 background-color: blue; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="wrapper"> 32 <div class="one">一</div> 33 <div class="two">二</div> 34 <div class="three">三</div> 35 <div class="four">四</div> 36 <div class="five">五</div> 37 </div> 38 39 </body> 40 </html>
例子2：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>wrapper</title> 5 <meta charset="UTF-8"> 6 <style> 7 .wrapper { 8 display: grid; 9 grid-template-columns:500px 1fr 2fr; 10 11 12 } 13 .one { 14 background-color: red; 15 } 16 .two { 17 background-color: skyblue; 18 } 19 .three { 20 background-color: pink; 21 } 22 .four{ 23 background-color: yellow; 24 } 25 .five{ 26 background-color: blue; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="wrapper"> 32 <div class="one">一</div> 33 <div class="two">二</div> 34 <div class="three">三</div> 35 <div class="four">四</div> 36 <div class="five">五</div> 37 </div> 38 39 </body> 40 </html>
repeat（）
重復記譜法
grid-template-columns ： 1fr 1fr 1fr ; 等價於 grid-template-columns ： repeat （ 3,1fr ）;
grid-template-columns ： repeat （ 2,1fr 2fr ）; 的·意思是共有4個軌道，1fr 2fr 重復出現兩次
隱式和顯式網格
在創建示例網格時，我們使用grid-template-columns屬性專門定義了列軌道，但網格也自己創建了行。這些行是隱式網格的一部分。而顯式網格由用grid-template-columns或grid-template-rows定義的任何列和行組成。
如果您在定義的網格之外放置某些內容 - 或者由於內容的數量，則需要更多的網格軌道 - 然后網格在隱式網格中創建行和列。默認情況下，這些軌道將自動調整大小，從而使其大小基於其中的內容。
您還可以使用grid-auto-rows和grid-auto-columns屬性為隱式網格中創建的軌道定義集大小。
minmax()
在設置顯式網格或為自動創建的行或列定義大小時，我們可能希望為軌道指定最小大小，但也要確保它們可以擴展以適應添加的任何內容。例如，我可能希望我的行永遠不會折疊小於100像素，但如果我的內容伸展到300像素的高度，那么我希望該行拉伸到該高度。
Grid為此minmax()功能提供了解決方案。在下一個例子中，我使用minmax()的是值grid-auto-rows。這意味着自動創建的行最小值為100像素，最大值為auto。使用auto意味着大小將查看內容大小並將拉伸以為此行中的單元格中的最高項目提供空間。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>wrapper</title> 5 <meta charset="UTF-8"> 6 <style> 7 .wrapper { 8 display: grid; 9 grid-template-columns: repeat(2 , 1fr 2fr); 10 grid-auto-rows : minmax(100px,auto); 11 12 13 } 14 .one { 15 background-color: red; 16 } 17 .two { 18 background-color: skyblue; 19 } 20 .three { 21 background-color: pink; 22 } 23 .four{ 24 background-color: yellow; 25 } 26 .five{ 27 background-color: blue; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="wrapper"> 33 <div class="one">一</div> 34 <div class="two">二 35 <p> 36 我有一個願望 37 就是牽着你的手 38 看看看一看這個世界 39 </p> 40 <p> 41 ------------------------------------------------------ 42 </p> 43 </div> 44 <div class="three">三</div> 45 <div class="four">四</div> 46 <div class="five">五</div> 47 </div> 48 49 </body> 50 </html>
線條定位
使用grid-column-start，grid-column-end，grid-row-start和grid-row-end屬性
分成多個網格編號進行定位
事例
第一個項目放在第1行的第1行，並跨越到第4行，在我們的例子中是第4行，它是網格上的最右邊的行。它從第1行開始，到第3行結束，因此跨越兩個行軌道。
第二個項目從網格列第1行開始，並跨越一個軌道。這是默認值，因此我不需要指定結束行。它還跨越從行第3行到第5行的兩行軌道。其他項目將自己放置在網格上的空白空間中。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>wrapper</title> 5 <meta charset="UTF-8"> 6 <style> 7 .wrapper { 8 display: grid; 9 grid-template-columns: repeat(3 , 1fr ); 10 grid-auto-rows : 100px; 11 12 13 } 14 .one { 15 background-color: red; 16 grid-column-start: 1; 17 grid-column-end: 4; 18 grid-row-start:1; 19 grid-row-end:3; 20 } 21 .two { 22 background-color: skyblue; 23 grid-column-start:1; 24 grid-row-start:3; 25 grid-row-end:5; 26 } 27 .three { 28 background-color: pink; 29 } 30 .four{ 31 background-color: yellow; 32 } 33 .five{ 34 background-color: blue; 35 } 36 </style> 37 </head> 38 <body> 39 <div class="wrapper"> 40 <div class="one">一</div> 41 <div class="two">二</div> 42 <div class="three">三</div> 43 <div class="four">四</div> 44 <div class="five">五</div> 45 </div> 46 47 </body> 48 </html>
gutters（間距）
列間距column-gap
行間距row-gap
在將空間分配給柔性長度fr軌道之前，將考慮間隙使用的任何空間，並且間隙用於尺寸目的，如常規網格軌道，但是您不能將任何東西放入間隙中。在基於線的定位方面，差距就像一條胖線。
網格嵌套
網格項可以成為網格容器。在下面的示例中，我有我之前創建的三列網格，我們有兩個定位項。在這種情況下，第一個項目有一些子項目。由於這些項目不是網格的直接子項，因此它們不參與網格布局，因此顯示在正常的文檔流程中。
嵌套網格與父級沒有任何關系
在Level 2 Grid規范的工作草案中，有一個名為subgrid的功能，它可以讓我們創建使用父網格的軌道定義的嵌套網格。
注意：Subgrids尚未在任何瀏覽器中實現，並且規范可能會發生變化
在當前的說明書中，我們將編輯上述嵌套格子例如更改的軌道定義grid-template-columns: repeat(3, 1fr)，到grid-template-columns: subgrid。然后，嵌套網格將使用父網格軌道來布局項目。
也可以使用 z-index 來控制堆疊順序