CSS Grid 网格布局

概念：grid布局又称CSS网格布局，（又名“网格”）是一个二维的基于网格的布局系统，其目的只在于完全改变我们设计基于网格的用户界面的方式

一、作用在容器上

1.display : grid 设置grid布局

2.grid-template-columns : 设置列数

3.grid-template-rows : 设置行数

和grid-template-columns一起，单位统一
a.fr单位
b.repeat()方法
注：网格中提供了一个新的单位：fr ( 比例单位 )
写法：

4.grid-template-areas : 根据子元素的网格名字划分区域

例子

    
    
    
    


    

        
1
        
2
        
3
    

5.grid-template:复合写法

是grid-template-rows、grid-template-columns、grid-template-areas的复合写法
代码如下：

grid-template: 
            "a1 a1 a1" 1fr
            "a3 a3 a2" 1fr
            "a3 a3 a2" 1fr
            /1fr 1fr 1fr;

6.grid-column-gap / grid-row-gap 列间距/行间距

grid-gap : 复合写法;行在前，列在后

7.justify-items : 子项的水平居中方式

        默认 :  stretch 默认值，拉伸。表现为水平或垂直填充。
        start  起始位置对齐
        center：中心位置对齐
        end：结束位置对齐

8.align-items : 子项的垂直居中方式

        默认 :  stretch 默认值，拉伸。表现为水平或垂直填充。
        start
        center
        end

place-items : align-items与justify-items复合写法，align-items在前，justify-items在后

9.justify-content : 整体网格的水平对齐方式

		属性值：
         stretch（默认）
         start
         end
         center
         space-between：表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配
         space-around：around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半
         space-evenly：evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等

10.align-content : 整体网格的垂直对齐方式

        默认：stretch
         start
         end
         center
         space-between
         space-around
         space-evenly

place-content : align-content与justify-content复合写法

二、作用在子项

1.grid-area : 找指定的区域

1.对应网格的名字
2.写对应的水平线的排列数字：grid-area : 1 / 3 / span 2 / 4; 
    写法：grid-row-start / grid-column-start / grid-row-end / grid-column-end
	grid-column-start  水平方向上占据的起始位置
    grid-column-end    水平方向上占据的结束位置
    grid-row-start     垂直方向上占据的起始位置
    grid-row-end       垂直方向上占据的结束位置
    注：a.只有在grid-column-end和 grid-row-end 中可以设置span操作。span去设置的不是结束位置，而是个数。 
       b.正常数字是位置，加上span是个数。

复合写法：

    grid-column:3 / 4;
        grid-column-start / grid-column-end
    grid-row:1 / span 2;
         grid-row-start / grid-row-end

2.justify-self 水平居中方式

3.algin-self 垂直居中方式

place-self：justify-self与algin-self复合写法

例子：

    
1
    
2
    
3
    
4
  

执行效果如下：

HTML5逆战班2002期–第四周 grid网格布局总结