gird柵格佈局

引入

　　對於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

原文：https://www.cnblogs.com/xiaohuochai/p/7083153.html

引入

網格容器

display

顯式網格

間距

網格項目

網格線

網格線命名

網格區域命名

隱式網格

隱式命名

網格項目層級

對齊

如何使用 JS 判斷用戶是否處於活躍狀態

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

HTML addEventListener和attachEvent的區別詳解

理解 CSS中的BFC

只看圖就能弄懂JavaScript原型鏈和閉包

HTML DOM getAttributeNode() 方法

vscode 超好用通用插件

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結