HTML-CSS(五十六)grid布局

grid布局是一个二维布局方法，纵横两个方向总是同时出

grid-template-columns和grid-template-rows
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应(auto)以及fr单位（网格剩余空间比例单位）。
auto与1fr区别在于，auto时根据内容撑起的变宽，fr是对剩余空间的划分
有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat（）语法进行简化操作


如果列布局（行布局的分布）选用fr作为单位，并且总fr的值<1的话，那么有剩余空间
如果不写grid-template-colums和grid-template-rows的话

它会自动根据块元素占据的行数换份行数，然后列数只有一列

如果只写列数不写行数，那么行高将会是整个盒子的高度的等比例划分

如果只写行的行高，不写列的宽度。那么还是只有一列，然后写几个行，就会等分规划几个列。其他行数可能就会被压缩

repeat（）使用

​语法： grid-template-rows/columns: repeat(重复个数,大小) ;

grid-template-areas和grid-template

​ area是区域的意思，grid-template-areas给我们网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区
grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写。
需要划分几个区域就需要几个div（块元素），然后分别给每个div分配各自的区域

在区域划分当中是不允许出现特殊图形的。比如像凸型什么的都不允许的。一定要形成矩形才可以。
复合写法：grid-template：

​ “grid-template-arear” grid-template-rows
/grid-tempalte-columns

建议还是不要写复合啦，那么麻烦的

grid-column-gap和grid-row-gap
grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。css grid-gap属性是grid-column-gap和grid-row-gap属性的缩写（复合写法）
grid-gap：grid-row-gap gid-column-gap

justify-items和align-itms
justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-item所指定网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下显示对齐（网格内的元素）

默认情况下是左右上下拉伸的。justify-items：stretch ；align-item：stretch

左右垂直居中 justify-items：center；align-item：center

水平拉伸，垂直居中justify-items: stretch;align-items: center;

place-items是align-items和justify-items属性复合写法

place-items：align-item justify-item

place-items：stretch center

justify-content和align-content

justify-content指定了网格元素的水平分布方式。align-content
指定了网格元素的垂直分布方式。（整个独立的网格）
只有当有剩余空间时。才能有效。

原图(默认值)：
align-content:start justify-content：start

align-content:center justify-content：center

align-content:center justify-content：space-between

align-content: center;justify-content：space-around

align-content: center;justify-content：space-evenly

space-around和space-evenly区别在于：space-around的时网格四周距离都是等分的，所以网格网格与网格中间的距离是两个网格侧边的距离的两倍，两侧的距离比网格中间距离小。space-evenly的是不管两侧还是网格于网格之间的距离都是一样的
复合写法：place-content：align-content justify-content
place-content:space-between space-between;

作用在grid子项上的css属性
假设规划一个九宫格，移动的位置参考线都是每条线对应的数字（可以更改每条横、竖线每条线的名字）

对某个单元格的移动：被移动的单元格的位置如果后面还有元素，就会被后面的元素替代，后面依次往前进一格
grid-column-start: 3; 水平方向上的占据起始的位置
grid-column-end: 4; 水平方向上的占据结束的位置 （span属性 ）
grid-row-start: 2; 垂直方向上的占据起始的位置
grid-row-end: 3; 垂直方向上的占据结束位置 （span属性）

通过位置的控制，能够将一个单元格进行延展
方法一：

方法二：通过span属性值，进行重复操作

写法：grid-row/column-end: span 重复个数;

复合写法：
grid-column：grid-column-start / grid-column-end
grid-row：grid-row-start / grid-row-end
斜线分割
grid-column:2 / 4;
grid-row:2 / 4 等价于grid-row：2 / span 2；
grid-area：划分这个单元格占据多少区域
写法：grid-area:纵向起始位置/横向起始位置/纵向结束位置/横向结束位置（名字或位置）
位置：grid-area:2/1/4/3;

位置：先划分区域，在分布

justify-self:单个网格元素的水平对齐方式

align-self：单个网格元素垂直方式

place-self：复合写法 align-self justify-self