本文共 1024 字，大约阅读时间需要 3 分钟。

   
        
    
     1
    
        
    
     2
    
        
    
     3
    
        
    
     4
    
        
    
     5
    
        
    
     6
    
        
    
     7
    
        
    
     8
    
        
    
     9
    
      
   
.container{    display:gird;    gird-template-rows:100px 100px 100px;/repeat(3,100px)/ 1fr 2fr/ 表示第二个是第一个的两倍宽    gird-template-columns:100px 100px 100px; //定义一个三行三列，行高列宽都是100的格子布局            grid-row-gap: 20px; //行间距    grid-column-gap: 20px; //列间距    justify-items: start / end/ center/ stretch //表示单元格内容的水平位置    align-items:    justify-content: start | end | center | stretch | space-around | space-between | space-evenly //表示整个内容区域在容器里面的水平位置    align-content：start | end | center | stretch | space-around | space-between | space-evenly    grid-auto-flow: row/column/  渲染顺序    .item{      justify-self: start / end/ center/ stretch  //表示单元格内容内容区域在容器里面的水平位置      align-self：      grid-column-start 属性， 例如，一个3X3的表格，竖线1-4，横线1-4      grid-column-end 属性，      grid-row-start 属性， span 2;  //表示跨越2行      grid-row-end 属性Ï    }    }

转载地址：http://eemsi.baihongyu.com/