Grid布局学习

1. grid布局简介与对比

简介：
grid采用网格布局方案，
把一块区域划分为多个网格，
然后分别用元素去填充这些网格。

与flex布局对比：
整体布局理念与flex有点类似，
但grid布局在实现固定区域布局的时候显得更灵活更易用。
flex布局是基于弹性盒子模型，让元素按先后顺序塞进大盒子里，可以说是简化的float布局。
grid布局则是类似于表格，用一个大网格来划分出若干个小网格，元素可以塞进任意一个或多个网格中，位置控制上更灵活。

2. grid的基本用法

1. 声明grid
display:grid;
display:inline-grid;	//行内网格布局

2. 设置网格的行和列
grid-template-rows:100px 100px 100px;	//3行表格，均为100px高
grid-template-rows:repeat(3,1fr);	//3行表格，1fr相当于flex:1，表示三个等高，均分大网格的高度
grid-template-rows:repeat(3,100px 200px 200px);	//按100px 200px 200px的分布重复3次，即9行
grid-template-rows:repeat(auto-fill,100px);	//单元格大小确定，容器大小不确定，希望一行尽可能容纳多的单元格
grid-template-rows:50% 50%;	//2行表格，平分高度
grid-template-rows:minmax(50px,100px);	//不小于50px不大于100px
grid-template-columns:100px 100px 100px;	//3列表格

3. 设置行列的间隔
grid-row-gap:10px;
grid-column-gap:10px;
grip-gap:10px 10px;	//合并写法，row-gap,column-gap

4. 设置排列方向
grid-auto-flow:column;	//默认是row

5. 设置水平/竖直方向位置，具体要看flow的方向
justify-items/align-items	//start,end,center,stretch等同于同时设置每个子元素的justify-self/align-self
justify-content/align-content	//space-between,space-around,space-evenly,start,end,center,stretcg把子元素作为一个整体，相对于父容器的位置
justify-self/align-self	//start,end,center,只设置自己的位置

合并写法：
place-content:<align-content><justify-content>
place-items:<align-items><justify-items>

6. 子元素所占的单元格位置
grid-column-start:1
grid-column-end:2
grid-row-start:1
grid-row-end:2

上述例子占据了左上角的一个单元格，
大网格从左到右的边线编号为1,2,3...，从上到下的编号为1,2,3...

合并写法：
grid-row:1/span 2;	//span代表跨越了多少个单元格
grid-column:1/1;

当然，还有一些关于grid-area等属性，因为作者平时很少用，就先不写啦～欢迎大家批评指正～