基本概念
像flex布局一样，grid布局中也有容器和项目的概念
除此之外还有间距(gap)、区域(area)、内容(content)以及隐藏的网格线等概念
容器属性
grid-template-*
grid-template-columns
grid-template-rows
grid-template-columns:100px 100px 100px;//定义三列，宽都为100px
grid-template-columns:repeat(3,100px);//与上面一样的效果
//auto-fill,有时，单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充
grid-template-columns:repeat(auto-fill,100px)//会随着页面的拉大一行放下的项目变多
//fr,为了方便表示比例关系，网格布局提供了fr关键字(fraction的缩写，意为片段)
grid-template-columns:repeat(4,1fr);//宽度平均分成4份
grid-template-columns:1fr 2fr 3fr;
//minmax(),函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值
grid-template-columns:1fr minmax(150px,1fr);//当两者缩小时，第二个最小只能到150px,扩大是一样大
//auto,表示由浏览器自己决定长度
grid-template-columns:100px auto 100px //两端固定，中间适应
//网格线，可以用方括号定义网格线名称，方便以后的引用
grid-template-columns:[c1] 100px [c2]100px [c3]100px [c4] //三格四条线
gap
row-gap
一行一行间的距离
column-gap
一列一列间的距离
grid-template-areas
一个区域由单个或多个单元格组成，由你决定(具体使用，需要在项目属性里面设置)
grid-template-areas:'a b c'
'd e f'
'g h i';
grid-template-areas:'a a a'
'b b b'
'c c c';
grid-template-areas:'a . c'
'd . f'
'g . i';
//区域不需要使用，则用点表示，区域的命名会影响到网格线。每个区域的
起始网格线，会自动命名为区域名-start,终止网格线自动命名为区域名-end
grid-auto-flow
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”
即填满第一行，再开始放入第二行(就是子元素的排放顺序)
- grid-auto-flow:row:以行来排列
- grid-auto-flow:column:以列来排列
grid-auto-flow:row dense:当某个项目较大占据了一行的空间却还有空余时，可以节约空间将下面的项目移上。
justify-items(水平方向)
justify-items:start|end|center|stretch
align-items(垂直方向)
align-items:start|end|center|stretch
place-items
上面两个的合并简写形式
<align-items><justify-items>
justify-content(水平方向)
justify-content:start|end|center|stretch|space-around|space-between|space-evenly
align-content(垂直方向)
align-content:start|end|center|stretch|space-around|space-between|space-evenly;
上面两个属性设置整个内容区域的水平和垂直的对齐方式
place-content
上面两个的简写
grid-auto-columns
grid-auto-rows
上面两个设置多出来的项目宽和高
项目属性
grid-column-*
列网格线的起止位置
grid-column-start
grid-column-end
grid-row-*
行网格线的起止位置
grid-row-start
grid-row-end
上面四个属性用来指定item的具体位置，根据在哪几根网格线之间来确定
//第一根到第三根之间
grid-column-start: 1;
grid-column-end: 3;
//简写
grid-column: 1 / 3;//与上面效果一样
//span
grid-column-start: span 2 //跨越两个
grid-column-end: span 2;
grid-area
指定在container中对应的区域
还可以用作grid-row-start,grid-column-start,grid-row-end,grid-column-end的合并简写形式，直接指定项目的位置
grid-template-areas: 'a b c'
'd e f'
'g h i';
grid-area: e; //在item1中
grid-area:<row-start>/<column-start>/<row-end>/<column-end>
grid-column-start:1;
grid-column-end:3;
grid-row-start:1;
grid-row-end:3;
grid-area:1 / 1 / 3 / 3;
justify-self
设置单元格内容的水平位置(左中右)，跟justify-items属性的用法完全一致
但只作用于单个项目(水平方向)
justify-self:start|end|center|stretch
align-self
设置单元格内容的垂直位置(上中下)，跟align-items属性的用法完全一致
也是只作用于单个项目(垂直方向)
align-self:start|end|center|stretch
place-self
place-self属性是align-self和justify-self属性的合并简写形式
place-self:center center
