IT工程師數位筆記本

前面的話

　　Grid布局方式借鑒了平面裝幀設計中的格線系統，將格線運用在屏幕上，而不再是單一的靜態頁面，可以稱之為真正的柵格。本文將詳細介紹grid布局

引入

　　對于Web開發者來說，網頁布局一直是個比較重要的問題。但實際上，在網頁開發很長的一段時間當中，我們甚至沒有一個比較完整的布局模塊。總的來說 Web 布局經歷了以下四個階段：

　　1、table表格布局，通過 Dreamweaver 拖拽表格或者手寫 table 標簽布局

　　2、float浮動及position定位布局，借助元素元素盒模型本身的特性以及 float position 等屬性等進行布局

　　3、flex彈性盒模型布局，革命性的突破，解決傳統布局方案上的三大痛點 排列方向、對齊方式，自適應尺寸。是目前最為成熟和強大的布局方案

　　4、grid柵格布局，二維布局模塊，具有強大的內容尺寸和定位能力，適合需要在兩個維度上對齊內容的布局

　　Grid Layout 是一種基于二維網格的布局系統，旨在完全改變我們設計基于網格的用戶界面的方式，彌補網頁開發在二維布局能力上的缺陷

　　與flex分為伸縮容器和伸縮項目類似，grid也分為網格容器和網格項目

網格容器

display

　　通過display屬性設置屬性值為grid或inline-grid可以創建一個網格容器。網格容器中的所有子元素就會自動變成網格項目（grid item）

display: grid
display: inline-grid

　　網格項目默認放在行中，并且跨網格容器的全寬

顯式網格

　　使用grid-template-columns和grid-template-rows屬性可以顯式的設置一個網格的列和行 

【grid-template-rows】

　　默認值為none

　　grid-template-rows指定的每個值可以創建每行的高度。行的高度可以是任何非負值，長度可以是px、%、em等長度單位的值

grid-template-rows: 60px 40px

　　item1和item2具有固定的高，分別為60px和40px。因為只定義了兩個行的高度值，所以item3和item4的高度是根據其自身的內容來定義。

【grid-template-columns】

　　默認值為none

　　像行一樣，通過grid-template-columns指定的每個值來創建每列的列寬

grid-template-columns: 40px 50px 60px

　　item4和item5放置在新的一行（第二行），因為grid-template-columns只定義了三列的大小，它們也分別放置在列1、列2和列3；其中列1、列2和列3的尺寸大小等于item1、item2和item3寬度。item1、item2和item3具有固定的寬度值，分別為40px、50px和60px

【fr】

　　fr單位可以幫助我們創建一個彈列的網格軌道。它代表了網格容器中可用的空間（就像Flexbox中無單位的值）

grid-template-columns: 1fr 1fr 2fr

　　在這個示例中，網格容器分成了4等份（1 + 1 + 2 = 4），每一份（1fr）是網格容器寬度的四分之一。所以item1和item2的寬度是網格容器的四分之一寬，item3是網格容器寬度的四分之二（2fr）

grid-template-columns: 3rem 25% 1fr 2fr

　　當fr和其它長度單位的值結合在一起的時候，fr是基于網格容器可用空間來計算。

　　在這個示例中，網格容器可用空間是網格寬度減去3rem和25%剩下的寬度，而fr就是基于這個尺寸計算：

1fr = (網格寬度 - 3rem - 網格寬度 * 25%) / 3

【minmax()】

　　可以通過minmax()函數來創建網格軌道的最小或最大尺寸。minmax()函數接受兩個參數：第一個參數定義網格軌道的最小值，第二個參數定義網格軌道的最大值。可以接受任何長度值，也接受auto值。auto值允許網格軌道基于內容的尺寸拉伸或擠壓

grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;

　　在這個示例中，第一行的高度最小值是100px，但其最大值為auto，允許行的高度可以變大超過100px。第一列設置了最小值為auto，但它的最大值是50%，也就是列的最大寬度不會超過網格容器寬度的50%

【repeat()】

　　使用repeat()可以創建重復的網格軌道。這個適用于創建相等尺寸的網格項目和多個網格項目。repeat()接受兩個參數：第一個參數定義網格軌道應該重復的次數，第二個參數定義每個軌道的尺寸。

grid-template-rows: repeat(3, 1fr);    
grid-template-columns: 30px repeat(3, 1fr) 30px;

　　在這個示例中，第一列和最后一列的寬度都是30px，并且它們之間有另列三列，這三列是通過repeat()來創建的，而且每列的列寬是1fr（1fr = (網格寬度 - 30px - 30px) / 3）

間距

【grid-column-gap】 

　　創建列與列之間的間距

【grid-row-gap】

　　創建行與行之間的間距

【grid-gap】

　　默認值為0

　　grid-gap是grid-row-gap和grid-column-gap兩個屬性的縮寫，如果它指定了兩個值，那么第一個值是設置grid-row-gap的值，第二個值設置grid-column-gap的值。如果只設置了一個值，表示行和列的間距相等，也就是說grid-row-gap和grid-column-gap的值相同

　　[注意]grid-gap只能創建列與列或行與行之間的間距，但不能創建列和行與網格容器邊緣的間距

　　間距(Gap)可以設置任何非負值，長度值可以是px、%、em等單位值

網格項目

網格線

【grid-row-start】

【grid-row-end】

【grid-column-start】

【grid-column-end】

　　默認值為auto

　　通過網格線可以定位網格項目。網格線實際上是代表線的開始、結束，兩者之間就是網格列或行。每條線是從網格軌道開始，網格的網格線從1開始，每條網格線逐步增加1

grid-row-start: 2;
grid-row-end: 3; 
grid-column-start: 2; 
grid-column-end: 3;　 

　　兩列三行的網格創建三條列網格線和四條行網格線。item1就是由行和列的號碼重新定位。如果一個網格項目跨度只有一行或一列，那么grid-row-end和grid-olumn-end不是必需的

【grid-row】

【grid-column】

grid-row: 2; 
grid-column: 3 / 4;

　　grid-row是grid-row-start和grid-row-end的簡寫。grid-column是grid-column-start和grid-column-end的簡寫。如果只提供一個值，則指定了grid-row-start(grid-column-start)值；如果提供兩個值，第一個值是grid-row-start(grid-column-start)的值，第二個值是grid-row-end(grid-column-end)的值，兩者之間必須要用/隔開

　　默認值為auto

【span】

　　關鍵詞span后面緊隨數字，表示合并多少個列或行

grid-row: 1 / span 3;
grid-column: span 2;

【grid-area】

grid-area: 2 / 2 / 3 / 3;

　　如果指定四個值，第一個值對應grid-row-start，第二個值對應grid-column-start，第三個值對應grid-row-end，第四個值對應grid-column-end

網格線命名

　　通過grid-template-rows和grid-template-columns定義網格時，網格線可以被命名。網格線名稱也可以設置網格項目位置

　　分配網格線名稱必須用方括號[網格線名稱]，然后后面緊跟網格軌道的尺寸值。定義網格線名稱時需要避免使用規范中出現的關鍵詞，以免導致混亂。

grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];

　　可以在方括號中添加多個名稱來命名網格線名稱，使用多外名稱命名網格線名稱時，名稱間要用空格隔開。每一個網格線的名稱可以用來定位網格項目的位置

grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end]; 
grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];

　　使用網格線名稱設置網格項目位置和使用網格線號碼設置網格項目位置類似，引用網格線名稱的時候不應該帶方括號

　　使用repeat()函數可以給網格線分配相同的名稱。這可以節省一定的時間。

grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);

　　使用repeat()函數可以給網格線命名，這也導致多個網格線具有相同的網格線名稱。相同網格線名稱指定網格線的位置和名稱，也且會自動在網格線名稱后面添加對應的數字，使其網格線名稱也是唯一的標識符

　　使用相同的網格線名稱可以設置網格項目的位置。網格線的名稱和數字之間需要用空格分開 

grid-row: row-start 2 / row-end 3;
grid-column: col-start / col-start 3;

網格區域命名

【grid-template-areas】

　　像網格線名稱一樣，網格區域的名稱可以使用grid-template-areas屬性來命名。引用網格區域名稱也可以設置網格項目位置

grid-template-areas:   "header header"   "content sidebar"    "footer footer";
grid-template-rows:    150px 1fr 100px;
grid-template-columns: 1fr 200px;

　　設置網格區域的名稱應該放置在單引號或雙引號內，每個名稱由一個空格符分開。網格區域的名稱，每組（單引號或雙引號內的網格區域名稱）定義了網格的一行，每個網格區域名稱定義網格的一列

　　[注意]grid-template-areas: "header header" "content sidebar" "footer footer";不可以簡寫為grid-template-areas: "header" "content sidebar" "footer";

　　grid-row-start、grid-row-end、grid-column-start和grid-column-end以及簡寫的grid-row、grid-column、grid-area都可以引用網格區域名稱，用來設置網格項目位置

隱式網格

【grid-auto-flow】

　　網格默認流方向是row，可以通過grid-auto-flow屬性把網格流的方向改變成column　　 

grid-auto-flow: column

　　當網格項目確認在顯式網格之外時就會創建隱性網格，當沒有足夠的空間或者顯式的網格軌道來設置網格項目，此時網格項目就會自動創建隱式網格

【grid-auto-rows】

【grid-auto-columns】

　　使用grid-auto-rows和grid-auto-columns屬性可以定義隱式的網格

　　默認值為auto

grid-template-rows:    70px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows:        140px;

　　在上面這個例子中我們只定義了一行（軌道），所以item1和item2的高都是70px。第二行（軌道）自動創建了item3和item4空間。grid-auto-rows定義隱式網格中的行（軌道）的大小，因此item3和item4的高度是140px

隱式命名

【隱式命名網格區域名稱】

　　通常可以將網格線命名成任何想命名的名稱，如果網格線名稱添加-start和-end的后綴，其實也隱式的創建一個網格區域，可以用來設置網格項目的位置

grid-template-rows:    [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];
grid-template-columns: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [inner-end];

　　在這個示例中，行和列都具有inner-start和inner-end網格線名稱，同時也對應的創建一個隱式網格區域名稱inner

grid-area: inner

　　網格項目定位可以通過網格區域名稱來設置，而不需要使用網格線名稱

【隱式命名網格線名稱】

　　隱式的指定網格線反向指定了隱式的網格區域名稱，命名的網格區域隱式的命名了網格線名稱 

grid-template-areas:   "header header" "content sidebar" "footer footer";
grid-template-rows:    80px 1fr 40px;
grid-template-columns: 1fr 200px;

　　指定網格區域會給網格區域邊線添加隱式的網格線名稱。這些網格線的命名是基于網格區域來命名，只是在網格區域名稱的后面添加后綴-start或-end

grid-row-start: header-start; 
grid-row-end: content-start; 
grid-column-start: footer-start; 
grid-column-end: sidebar-end;

　　在這個示例中，header通過隱式的網格線名稱設置其位置

網格項目層級

　　網格項目可以具有層級和堆棧，必要時可能通過z-index屬性來指定 

.item-1,.item-2 {
    grid-row-start:  1;
    grid-column-end: span 2;
}
.item-1 { 
    grid-column-start: 1; 
    z-index: 1; 
}
.item-2 { 
    grid-column-start: 2 
}

　　在這個例子中，item1和item2的開始行都是1，item1列的開始是1，item2列的開始是2，并且它們都跨越兩列。兩個網格項目都是由網格線數字定位，結果這兩個網格項目重疊了。

　　默認情況下，item2在item1上面，但是，我們在item1中設置了z-index:1;，導致item1在item2之上

對齊

【網格項目對齊方式（Box Alignment）】

　　CSS的Box Alignment Module補充了網格項目沿著網格行或列軸對齊方式。

【justify-items】

【justify-self】

　　justify-items和justify-self指定網格項目沿著行軸對齊方式；align-items和align-self指定網格項目沿著列軸對齊方式。

　　justify-items和align-items應用在網格容器上

【align-items】

【align-self】

　　align-self和justify-self屬性用于網格項目自身對齊方式

　　這四個屬性主要接受以下屬性值：

auto | normal | start | end | center | stretch | baseline | first baseline | last baseline

【網格軌道對齊方式】

　　網格軌道對齊可以相對于網格容器行和列軸。

　　align-content指定網格軌道沿著行軸對齊方式；justify-content指定網格軌道沿著列軸對齊方式。它們支持下面屬性：

normal | start | end | center | stretch | space-around | space-between | space-evenly | baseline | first baseline | last baseline