grid网格布局

grid网格布局

Grid布局是一个二维的布局方法，它是由纵横相交的两组网格线形成的框架性布局结构。
比如百度风云榜就用到网格布局

一、首先来看它的属性：
（1）作用在容器上的：
display : grid
grid-template-columns : 设置列数
grid-template-rows : 设置行数
fr单位
repeat()方法
注：网格中提供了一个新的单位：fr ( 比例单位 )

grid-template-areas : 划分区域的
注：区域必须是矩形。
grid-template:复合写法
grid-template-rows
grid-template-columns
grid-template-areas

grid-column-gap : 列的间距
grid-row-gap : 行的间距
grid-gap : 复合写法
grid-row-gap grid-column-gap
justify-items : 子项的水平居中方式

stretch 默认值，拉伸。表现为水平或垂直填充。
start
center
end
align-items : 子项的垂直居中方式
默认 : stretch 默认值，拉伸。表现为水平或垂直填充。
注：justify-items、align-items是在自己网格内的对齐方式。
place-items : 是align-items、 justify-items的复合写法

justify-content : 整体网格的水平对齐方式
默认：stretch
start
end
center
space-between
space-around
space-evenly

align-content : 整体网格的垂直对齐方式
默认：stretch
start
end
center
space-between
space-around
space-evenly
place-content : 是align-content 、justify-content的复合写法
二、示例
1.对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。

运行结果：

还可以这样写，效果是一样的

2. grid-template-areas : 划分区域
grid-area : 找指定的区域

运行结果：

3.行、列间距

运行结果：

4.justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐；

运行结果：

align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。

运行结果：
5. justify-content指定了整体网格的水平对齐方式；
属性有：
start（靠前）
end（靠后）
center（靠中）

space-evenly


space-between


space-around


align-content指定了网格元素的垂直分布方式，属性值与justify-content相同。
（2）作用在子项上的：
grid-area : 找指定的区域
1.对应网格的名字
2.写对应的线的数字：grid-area : 1 / 3 / span 2 / 4;
grid-column-start 水平方向上占据的起始位置
grid-column-end 水平方向上占据的结束位置
grid-row-start 垂直方向上占据的起始位置
grid-row-end 垂直方向上占据的结束位置
justify-self：单个网格元素的水平对齐方式
algin-self： 单个网格元素的垂直对齐方式。
注：只有在grid-column-end和 grid-row-end 中可以设置span操作。span去设置的不是结束位置，而是个数。
正常数字是位置，加上span是个数。