CSS：Grid布局

display: grid | inline-grid | subgrid

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

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

• <track-size>：定義網(wǎng)格單元的寬高，其單位可以是一個長度(如px、em、rem、vw、vh)或百分比，也可以是網(wǎng)格中自由空間的份數(shù)(單位為fr)。
• <line-name>：定義網(wǎng)格線的名稱，它不是必須值?？梢砸粋€你選擇的任意名字，當(dāng)沒有顯示設(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%;  
}

/* 等價于 */
.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ū)域名字
• .：一個句點表示一個空的網(wǎng)格單元
• none：沒有網(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>：長度值

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ū)域的左邊對齊
• end：內(nèi)容和網(wǎng)格區(qū)域的右邊對齊
• center：內(nèi)容和網(wǎng)格區(qū)域的中間對齊
• stretch：填充整個網(wǎng)格區(qū)域的寬度（默認(rèn)值）

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

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

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

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

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

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

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

• <track-size>：可以是一個長度，百分比或者是一個網(wǎng)格中自由空間的份數(shù)（通過使用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>] ];