CSS Grid 布局

来源：http://itssh.cn/post/940.html

CSS Grid 网格布局是一种新的CSS布局模型，布局定义了一个基于二维网格的布局系统，优化了用户界面设计。在网格布局模型中，一个网格容器的子节点可以被定位在一个预定义的灵活或固定大小的布局网格的任意槽中。

案例：

    
        
        
        
        
        
        
    
    
    
        
        
一行两列等宽
        

            
1
            
2
        
        
        

        
两行两列等宽
        
        

            
1
            
2
            
3
            
4
        
        
        

        
        
两行三列等宽
        

            
1
            
2
            
3
            
4
            
5
        
        
        

        
        
三行三列效果，每行开始列占4分之二
        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
        
        
        

        
        
响应式网格
        

            
1
            
2
            
3
            
4
            
5
            
6
        
        
        
        
设置行属性
        

            
1
            
2
            
3
        
    

效果

2017-05-23_141747.png

浏览器支持：http://caniuse.com/#feat=css-grid

QQ截图20170523143227.jpg

来源：http://itssh.cn/post/940.html