CSS：Grid布局

display: grid | inline-grid | subgrid

• grid：定义一个块级的网格容器
• inline-grid：定义一个内联的网格容器
• subgrid：定义一个继承其父级网格容器的行和列的大小的网格容器，它是其父级网格容器的一个子项。

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

• <track-size>：定义网格单元的宽高，其单位可以是一个长度(如px、em、rem、vw、vh)或百分比，也可以是网格中自由空间的份数(单位为fr)。
• <line-name>：定义网格线的名称，它不是必须值。可以一个你选择的任意名字，当没有显示设定时，它的名字以数字表示。
  

.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中指定的网格区域名字
• .：一个句点表示一个空的网格单元
• none：没有网格区域被定义

<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：内容和网格区域的左边对齐
• end：内容和网格区域的右边对齐
• center：内容和网格区域的中间对齐
• stretch：填充整个网格区域的宽度（默认值）

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

• start：内容和网格区域的顶部对齐
• end：内容和网格区域的底部对齐
• center：内容和网格区域的中间对齐
• stretch：填充整个网格区域的高度（默认值）

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

• start:左对齐
• end：右对齐
• center：居中对齐
• stretch：填充网格容器
• space-around：在每个网格子项中间放置均等的空间，在始末两端只有一半大小
• space-between：两边对齐，在每个网格子项中间放置均等的空间，在始末两端没有空间
• space-evenly：网格间隔相等，包括始末两端

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

• start：顶部对齐
• end：底部对齐
• center：居中对齐
• stretch：填充网格容器
• space-around：在每个网格子项中间放置均等的空间，在始末两端只有一半大小
• space-between：上下对齐，在每个网格子项中间放置均等的空间，在始末两端没有空间
• space-evenly：在每个网格子项中间放置均等的空间，包括始末两端

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

• <track-size>：可以是一个长度，百分比或者是一个网格中自由空间的份数（通过使用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>] ];