CSS：Grid布局

display: grid | inline-grid | subgrid

• grid：定義一個(gè)塊級(jí)的網(wǎng)格容器
• inline-grid：定義一個(gè)內(nèi)聯(lián)的網(wǎng)格容器
• subgrid：定義一個(gè)繼承其父級(jí)網(wǎng)格容器的行和列的大小的網(wǎng)格容器，它是其父級(jí)網(wǎng)格容器的一個(gè)子項(xiàng)。

grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
grid-template-rows: <track-size> ... | <line-name> <track-size> ...;

• <track-size>：定義網(wǎng)格單元的寬高，其單位可以是一個(gè)長(zhǎng)度(如px、em、rem、vw、vh)或百分比，也可以是網(wǎng)格中自由空間的份數(shù)(單位為fr)。
• <line-name>：定義網(wǎng)格線(xiàn)的名稱(chēng)，它不是必須值?？梢砸粋€(gè)你選擇的任意名字，當(dāng)沒(méi)有顯示設(shè)定時(shí)，它的名字以數(shù)字表示。
  

.container{   
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
		}

.container{   
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];   
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];  
}

.container{   
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];  
}

.container{   
  grid-template-columns: repeat(3, 20px [col-start]) 5%;  
}

/* 等價(jià)于 */
.container{   
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;  
}

.container{   
  grid-template-columns: 1fr 1fr 1fr;  
}

.container{   
  grid-template-columns: 1fr 50px 1fr 1fr;  
}

grid-template-areas: "<grid-area-name> | . | none | ..." "..." 

• <grid-area-name>：在grid-area中指定的網(wǎng)格區(qū)域名字
• .：一個(gè)句點(diǎn)表示一個(gè)空的網(wǎng)格單元
• none：沒(méi)有網(wǎng)格區(qū)域被定義

<div class="container">   
  <div class="item-a"></div>   
  <div class="item-b"></div>   
  <div class="item-c"></div>   
  <div class="item-d"></div>   
</div>

.item-a{   
  grid-area: header;  
}  
.item-b{   
  grid-area: main; 
}  
.item-c{   
  grid-area: sidebar; 
}  
.item-d{   
  grid-area: footer; 
}  
.container{    
  width: 300px;
  height:200px;   
  display:grid;   
  grid-template-columns: 1fr 1fr 1fr 1fr;   
  grid-template-rows: auto;   
  grid-template-areas: "header header header header"   
                       "main main . sidebar"   
                       "header footer header footer";  
}

grid-column-gap: <line-size>
grid-row-gap: <line-size>

• <line-size>：長(zhǎng)度值

grid-gap: <grid-column-gap> <grid-row-gap>

.container{   
  display:grid;   
  grid-template-columns: 100px 50px 100px;   
  grid-template-rows: 80px auto 80px;    
  grid-column-gap: 10px;   
  grid-row-gap: 15px;  
}

justify-items: start | end | center | stretch

• start：內(nèi)容和網(wǎng)格區(qū)域的左邊對(duì)齊
• end：內(nèi)容和網(wǎng)格區(qū)域的右邊對(duì)齊
• center：內(nèi)容和網(wǎng)格區(qū)域的中間對(duì)齊
• stretch：填充整個(gè)網(wǎng)格區(qū)域的寬度（默認(rèn)值）

align-items: start | end | center | stretch;

• start：內(nèi)容和網(wǎng)格區(qū)域的頂部對(duì)齊
• end：內(nèi)容和網(wǎng)格區(qū)域的底部對(duì)齊
• center：內(nèi)容和網(wǎng)格區(qū)域的中間對(duì)齊
• stretch：填充整個(gè)網(wǎng)格區(qū)域的高度（默認(rèn)值）

justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;

• start:左對(duì)齊
• end：右對(duì)齊
• center：居中對(duì)齊
• stretch：填充網(wǎng)格容器
• space-around：在每個(gè)網(wǎng)格子項(xiàng)中間放置均等的空間，在始末兩端只有一半大小
• space-between：兩邊對(duì)齊，在每個(gè)網(wǎng)格子項(xiàng)中間放置均等的空間，在始末兩端沒(méi)有空間
• space-evenly：網(wǎng)格間隔相等，包括始末兩端

align-content: start | end | center | stretch | space-around | space-between | space-evenly 

• start：頂部對(duì)齊
• end：底部對(duì)齊
• center：居中對(duì)齊
• stretch：填充網(wǎng)格容器
• space-around：在每個(gè)網(wǎng)格子項(xiàng)中間放置均等的空間，在始末兩端只有一半大小
• space-between：上下對(duì)齊，在每個(gè)網(wǎng)格子項(xiàng)中間放置均等的空間，在始末兩端沒(méi)有空間
• space-evenly：在每個(gè)網(wǎng)格子項(xiàng)中間放置均等的空間，包括始末兩端

grid-auto-columns: <track-size>
grid-auto-rows: <track-size>

• <track-size>：可以是一個(gè)長(zhǎng)度，百分比或者是一個(gè)網(wǎng)格中自由空間的份數(shù)（通過(guò)使用fr單位）

.container{   
  grid-template-columns: 60px 60px;   
  grid-template-rows: 90px 90px  
}

.item-a{   
  grid-column: 1 / 2;   
  grid-row: 2 / 3;  
}  
.item-b{   
  grid-column: 5 / 6;   
  grid-row: 2 / 3;  
}

.container{   
  grid-auto-columns: 60px;  
}

grid-auto-flow: row | column | row dense | column dense

• row：按照行依次從左到右排列
• column：按照列依次從上到下排列
• dense：按先后順序排列

<section class="container">   
  <div class="item-a">item-a</div>   
  <div class="item-b">item-b</div>   
  <div class="item-c">item-c</div>   
  <div class="item-d">item-d</div>   
  <div class="item-e">item-e</div>  
</section>

.container{   
  display: grid;   
  grid-template-columns: 60px 60px 60px 60px 60px;   
  grid-template-rows: 30px 30px;   
  grid-auto-flow: row;  
}

.item-a{   
  grid-column: 1;   
  grid-row: 1 / 3;  
}  
.item-e{   
  grid-column: 5;   
  grid-row: 1 / 3;
} 

grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ];