Grid网格布局

grid网格布局

兼容性：ie10及以上浏览器支持；

容器常用属性设置
display:grid | inline-grid; 设置元素为网格容器，或是行内网格容器
grid-template-columns:[c1] 200px [c2] 200px [c3];设置网格的列数及宽度，常用设置有repeat(2,200px),宽度可以使用百分比，fr1,auto-fill,auto,minmax(100px, 1fr),px定义；c1-c3为网格线名称，通过网格线名称可以随意移动网格位置
grid-template-rows:200px 200px; 设置网格的行数几行高；常用设置同上
grid-auto-flow:row(默认) | row-dense | column | column-dese;网格的排列顺序
grid-template-areas：'a b c' 'd e f';网格区域,可以使用.占位符描述不需要区域，区域的网格线表示为a-start,a-end；
grid-gap:10px 10px;grid-column-gap和grid-row-gap的简写，设置网格间隙
justify-content:center | start | end | space-between | space-around |space-evenly | stretch（默认）； 网格相对于容器水平居中
align-content:网格相对于容器垂直居中
place-content:center; 网格布局的简写
justify-items:center | start | end | stretch（默认）； 网格相对于容器水平居中
align-items:网格相对于容器垂直居中
place-items:center; 网格布局的简写

设置网格的排列及顺序
gride-area:name || row-start / column-start / row-end / column-end ；制定网格放在哪一个网格区域；位置固定不变，如果其他单一个也设置在这个区域，会被覆盖；
grid-column-start:2;设定网格开始的网格线位置,还可以使用网格线的名称，还可以使用span 2，表示跨越两个单元格
grid-column-end:4;设定网格结束的网格线位置
grid-row-start:2;设定网格开始的网格线位置
grid-row-end:4;设定网格结束的网格线位置

以上可以使用简写属性：grid-column:start / end；grid-row:start / end;也可以写成grid-row:1 / span 2;表示占据两个单元格

网格项常用属性设置

grid-column-start name/number/auto 行开始网格线
grid-column-end name/number/auto 行结束网格线
grid-row-start name/number/auto 列开始网格线
grid-row-end name/number/auto 列开始网格线
grid-area name 命名模板名称
justify-self:start | end | center | stretch 左对齐、右对齐、左右居中、填充
align-self:start | end | center | stretch 上对齐、下对齐、上下居中、填充

其实跟flex布局属性设置类似，个人感觉他的item项属性不好用

下面是常用设置代码，一起学习

    
    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
    

    

        
1
        
2
        
3
        
4
        
5
        
6
    

    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9