Grid布局（网格布局）

网格布局（Grid）是 CSS 中一个布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

下面这样的布局，就是Grid布局。

 

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

 Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局比 Flex 布局强大。

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。

作用在grid容器上	作用grid布局子元素上
grid-template-columns 行	grid-column-start      水平方向上占据的起始位置
grid-template-rows        列	grid-column-end    水平方向上占据的结束位置。
grid-template-areas    区域	grid-row-start        垂直方向上占据的起始位置。
grid-template              行，列，区域的组合写法	grid-row-end        垂直方向上占据的结束位置。
grid-column-gap        行与行间隙大小	grid-column          grid-column-start + grid-column-end的缩写。
grid-row-gap             列与列间隙大小	grid-row        grid-row-start + grid-row-end的缩写。
grid-gap                    网格间隙大小	grid-area       表示当前网格所占用的区域，名字和位置两种表示方法。
justify-items     网格元素水平呈现的方式，拉伸、左右中对齐	justify-self      单个网格元素的水平对齐方式
align-items       网格元素垂直呈现的方式，拉伸、上下中对齐	align-self       单个网格元素的垂直对齐方式。
place-items      网格呈现方式组合写法	place-self      align-self和justify-self的缩写。
justify-content   网格元素水平分布的方式
align-content     网格元素垂直分布的方式
place-content    网格分布方式组合写法

对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。

grid-template-columns: 100px 25%  auto fr；grid-template-rows: 100px 25%  auto fr;有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat(4，1fr&&100px)语法进行简化操作。