grid布局

什么是grid布局？

flex布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局，Grid布局则是将容器划分成行和列，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局

grid

基本概念

像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(水平方向)

1	`justify-items:start\|end\|center\|stretch`

start

center

stretch 默认值

align-items(垂直方向)

1	`align-items:start\|end\|center\|stretch`

start

center

stretch 默认值

place-items

上面两个的合并简写形式

<align-items><justify-items>

都设置成center

justify-content(水平方向)

1	`justify-content:start\|end\|center\|stretch\|space-around\|space-between\|space-evenly`

center

space-around

space-between

space-evenly

align-content(垂直方向)

1	`align-content:start\|end\|center\|stretch\|space-around\|space-between\|space-evenly;`

start

space-around

space-between

space-evenly

上面两个属性设置整个内容区域的水平和垂直的对齐方式

place-content

上面两个的简写

两个space-evenly

grid-auto-columns

grid-auto-rows

上面两个设置多出来的项目宽和高

在横轴排列的情况下设置rows为50px

项目属性

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;