css-grid布局

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.轨道
相邻两个网格线之间的称为轨道。

image.png

属性值

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布局更加全面，它是一种二维布局，而且可以实现复杂的二维布局，真正的吧页面的坐标系运用起来。