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;
}