网格布局

网格布局

目前，谷歌浏览器及火狐浏览器已经对网格布局给予了充分支持。

定义网格布局

diplay: grid;

    
        
        
        
    
    
        

            
item 1
            
item 2
            
item 3
            
item 4
            
item 5
            
item 6
            
item 7
            
item 8
            
item 9
            
item 10
            
item 11
            
item 12
        


    

container类定义了网格布局，就叫网格容器吧，其子元素就叫grid项目。

grid-template-rows

这个定义了每一行的高度，上面代码就是定义了3行，每行高度分别是200px，100px，200px;

grid-template-columns

定义了列数和宽度

grid-template-columns: repeat(列数, 宽度);

grid-template-columns: repeat(4, 100px);

等同于

grid-template-columns: 100px 100px 100px 100px;

这个显示边框，方便观察

.container div{
    border: 1px solid lightgray;
}

这样基本的网格就知道构建的方法了，接下来就是编写每个网格所占据的位置。

四个重要属性

• grid-row-start 网格开始的水平线
• grid-row-end 网格结束的水平线
• grid-column-start 网格开始的垂直线
• grid-column-end 网格结束的垂直线

用具体代码来解释

添加以下CSS代码

.item1{
    grid-row-start: 1;   /*表格中最上边那条水平线*/
    grid-row-end: 2;     /*表格中从上到下的第二条水平线*/
    grid-column-start: 1;    /*表格中最靠左的垂直线*/
    grid-column-end: 3;  /*表格中从左往右第三条水平线*/
}

确定了这些线的位置后，item1这个格子也就确定了，这四条线围成的格子就是了。

以上可以简写成以下代码

.item1{
    grid-row: 1/2;
    grid-column: 1/3;
}

网格布局的fr单位

在引入了网格布局后，又新增了一个单位fr(fraction的简称)，它是相对单位，1个fr可以得到空间中的1份，这具体什么1份，我就不清楚了，不过是个相对单位就行了，比px灵活。

改下CSS代码，看下效果

.container{
    display: grid;
    grid-template-rows: 200px 100px 200px;
    grid-template-columns: repeat(4, 1fr);
}

grid-gap

这个是行和行，列与列之间的间隔

.container{
    display: grid;
    grid-template-rows: 200px 100px 200px;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}

grid-column-gap和grid-row-gap

前者是单独定义列与列的间隔，后者是单独定义行与行的间隔

命名网格线

通过命名网格线来分别定义单元格的宽度和高度。

如下代码，我是感觉挺麻烦的，可能太渣了，玩得还不够6。

    
        
        
        
    
    
        
网页头部
        

            
侧边栏
        
        
网站脚部
    

使用区域

利用属性grid-template-areas

这个看起来就比较直观

    
        
        
        
    
    
        

            
网页头部
            
侧边栏
            
网页脚注
            
内容
        


    

以上三种排列网格的方法，看自己喜欢哪个了。

提前祝大家新年快乐。