Grid网格布局入门

Grid网格布局入门

Grid网格布局在前端的实际应用中非常广泛。其作用是将网页划分成一个个网格，且这些网格可以随意组合，具有很强的便利性。例如百度风云榜中的今日上榜（如下图），也可使用网格来完成。

网格的属性：
1.作用在父容器上的属性
（1） display : grid
（2）grid-template-columns : 设置列数
（3）grid-template-rows : 设置行数

从代码中可以看到，给box设置了三行三列的网格，每一个网格宽高分别为100px 100px;

这样重复设置同样的值会比较麻烦，这时候我们可以使用repeat(）值和fr单位。fr是比例单位,等分可用空间。将上面代码换一下，看看效果：

 #box{width: 300px;height: 300px; background: red;display: grid;grid-template-columns:repeat(3,1fr);grid-template-rows: repeat(3,1fr);}

可以看到，效果是一样的，所有在对网格的行和列设置重复同样的值时，可以使用repeat（）的方式。

（4）grid-template-areas : 划分区域的（区域必须是矩形区域）
例如：

        #box{width: 300px;height: 300px; background: red;display: grid;grid-template-columns:repeat(3,1fr);grid-template-rows: repeat(3,1fr);grid-template-areas: 
        "a1 a2 a3"
        "a4 a5 a6"
        "a7 a8 a9"
        ;}
         #box div:nth-of-type(1){grid-area: a1;background: rebeccapurple;}
         #box div:nth-of-type(2){grid-area: a2;background: rosybrown;}
         #box div:nth-of-type(3){grid-area: a3;background: saddlebrown;}
         #box div:nth-of-type(4){grid-area: a4;background: sienna;}
         #box div:nth-of-type(5){grid-area: a5;background: springgreen;}
         #box div:nth-of-type(6){grid-area: a6;background: turquoise;}
         #box div:nth-of-type(7){grid-area: a7;background: yellow;}
         #box div:nth-of-type(8){grid-area: a8;background: blanchedalmond;}
         #box div:nth-of-type(9){grid-area: a9;background: blue;}

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
    

结果如下：

（5） grid-column-gap : 列的间距
（6） grid-row-gap : 行的间距
例如：

#box{width: 300px;height: 300px; background: red;display: grid;grid-template-columns:repeat(3,1fr);grid-template-rows: repeat(3,1fr);grid-template-areas: 
        "a1 a2 a3"
        "a4 a5 a6"
        "a7 a8 a9"
        ;grid-column-gap: 10px;grid-row-gap: 5px;}
         #box div:nth-of-type(1){grid-area: a1;background: rebeccapurple;}
         #box div:nth-of-type(2){grid-area: a2;background: rosybrown;}
         #box div:nth-of-type(3){grid-area: a3;background: saddlebrown;}
         #box div:nth-of-type(4){grid-area: a4;background: sienna;}
         #box div:nth-of-type(5){grid-area: a5;background: springgreen;}
         #box div:nth-of-type(6){grid-area: a6;background: turquoise;}
         #box div:nth-of-type(7){grid-area: a7;background: yellow;}
         #box div:nth-of-type(8){grid-area: a8;background: blanchedalmond;}
         #box div:nth-of-type(9){grid-area: a9;background: blue;}

结果如下：

（7）justify-items : 子项的水平居中方式
选项： 默认 : stretch 默认值，拉伸。表现为水平或垂直填充。 start， center，end

（8）align-items : 子项的垂直居中方式
选项： 默认 : stretch 默认值，拉伸。表现为水平或垂直填充。 start， center，end
（9） justify-content : 整体网格的水平对齐方式
选项：默认：stretch， start， end， center， space-between， space-around（子项之间的空间是边距的二倍），space-evenly（平分空间）
（10） align-content : 整体网格的垂直对齐方式
选项：默认：stretch， start， end， center， space-between， space-around（子项之间的空间是边距的二倍），space-evenly（平分空间）
2、作用在子项上的
grid-area : 找指定的区域
grid-column-start 水平方向上占据的起始位置
grid-column-end 水平方向上占据的结束位置
grid-row-start 垂直方向上占据的起始位置
grid-row-end 垂直方向上占据的结束位置

每个网格的行和列都有默认的排序

例：

  #box{border: 1px solid black; width: 300px;height: 300px;display: grid;grid-template-columns:repeat(3,1fr);grid-template-rows: repeat(3,1fr);
        ;margin: 100px auto;}
        #box div{background: red;border: 1px solid yellow;}

   

        
1
        
2
        
3
    

结果如下：

现在使box下的div从列的第三条边开始，列的第四条边结束，

  #box{border: 1px solid black; width: 300px;height: 300px;display: grid;grid-template-columns:repeat(3,1fr);grid-template-rows: repeat(3,1fr); ;margin: 100px auto;}
  #box div{background: red; grid-column-start: 3;grid-column-end: 4;border: 1px solid yellow;}

结果如下：

《逆战班》