css3 grid 网格布局

1.grid-template设置网格模板，实现四列两行布局；grid-gap设置网格间隙，包括行和列

 

 

 

 

 

2.grid布局，使用fr单位实现等比例分配空间。fr是分数（fraction）的缩写

 

 

 

 

 

.con{
    display: grid;
    grid-template-columns: 1fr 3fr 2fr 6fr;
    grid-template-rows: 50px 50px 50px ;
    grid-gap: 10px;
}
.con div{
    background: orange;
}
.con div:nth-child(odd){
    background: chartreuse;
}