css布局是前端页面无法避免的一个问题，经典的圣杯布局，水平/垂直居中问题等，我们以前用到的tabel布局，浮动布局，定位布局等都帮我们顺利解决了这些问题，但是不够优雅。之后出现了flex布局，大家工作量就轻松很多，但是基本来说都是一维布局，而grid布局的出现填补了这个点。
什么是Grid布局
Grid布局是一个二维布局系统，可以把页面分割成不同的网格块，并且可以定义它们的大小，同时每个网格又可以独立设置自己的位置（这里区别于table）。
Grid中的基本概念
1.容器
网格布局的容器是设置display为grid或者inline-grid，这一点跟flex布局很像，而它的子元素就是网格元素。
2.网格线
分割网格的线称为网格线，包括横向（从左往右）和纵向（从右往左）。网格线可以通过grid-template-columns和grid-template-rows命名，默认以数字命名（注意是从1开始）。
3.网格
网格就是被网格线划分出来的单元格，也就是网格元素，这里跟table一样，多个网格可以合并。
4.轨道
相邻两个网格线之间的称为轨道。
属性值
1.容器属性
display
- grid
- inline-grid （内联元素）
grid-template
网格元素大小
- grid-template-column（纵向）
grid-template-column: 16px 16px 16px;//表示网格三列，每列的宽度都是16px
- grid-template-rows（横向）
grid-template-rows: 16px 16px 16px;//表示网格三行，每行的高度都是16px
grid-gap
网格行和列的间隔（网格线），一个参数时行列间隔相同；两个参数时，第一个表示行第二个表示列，也可以分开写：
- grid-column-gap
- grid-rows-gap
grid-gap: 1px;//表示行列之间距离都是1px
grid-gap: 1px 2px;//表示横向间距为1px，纵向间距为2px
justify-items
网格水平方向的对齐方式，有四种
- stretch （默认）
- start （行初开始）
- center（水平居中）
- end（行尾开始）
align-items
网格垂直方向的对齐方式，有四种
- stretch （默认）
- start （列初开始）
- center（垂直居中）
- end（列尾开始）
justify-content
网格总尺寸小于容器尺寸时，水平方向的对齐方式
- stretch（默认）
- start
- center
- end
注:上面四种方式是所有网格作为一个整体，对齐位置同上
-
space-between （分散对齐，网格会根据剩余空间分配纵向列距）
image.png -
space-around
image.png -
space-evenly
image.png
align-content
网格总尺寸小于容器尺寸时，垂直方向的对齐方式，属性值及原理同横向对齐方式
grid-auto-flow
网格排列方向（以三行三列来排序）
- rows （前三个元素为第一行）
- column（前三个元素为第一列）
- dense（按照横向排列自动填充，比如第一行放不下第二个元素但是可以放下第三个元素，那么第三个元素就会排到第一个元素后面）。
2.网格属性
grid-column
设置垂直方向网格合并（效果类似于单元格合并）
grid-row
设置水平方向网格合并（效果类似于单元格合并）
grid-row+column
水平加横向的效果
justify-self
网格中内容的水平对齐方式
- stretch （默认充满）
- start （行初对齐）
- center（水平居中）
- end（行尾对齐）
align-self
网格中内容的垂直对齐方式
- stretch （默认充满）
- start （列初对齐）
- center（垂直居中）
- end（列尾对齐）
结语
gird布局相对flex布局更加全面，它是一种二维布局，而且可以实现复杂的二维布局，真正的吧页面的坐标系运用起来。
