Grid布局

• Grid布局也叫网格布局，它将一个容器或者网页划分成一个个网格，通过对网格的任意组合，可以做出各种各样的布局，当一个容器被设为网格布局之后，容器子元素的float、display ：inline-block；、display：table-cell；、vertical-align和column-*等设置都将失效。

• Grid布局于Flex布局有一定的相似性，都可以制定容器内部多个项目的位置。但是，它们之间页存在重大区别：

  ​ Flex布局是轴线布局，只能指定项目针对轴线的位置，可以看作是一维布局。Grid布局则是将容器划分行和列，行和列交叉分布，会产生一个个单元格，有点类似于table的构成。

• 在Grid布局下，可以

  使用display：grid；定义一个GridBox容器，

  使用grid-template-columns属性定义每一列的列宽、

  使用grid-template-rows属性定义每一列的行高、

  使用gird-row-gap和grid-column-gap属性定义行间距和列间距、

  使用grid-template-areas属性定义项目所在的区域、

  使用grid-auto-flow属性定义项目的排列方式、

  使用justify-items属性定义单元格内容的水平位置、

  使用align-items属性设置单元格的垂直位置、

  使用justify-content属性定义整个内容区域在哦那个其里面的水平位置、

  使用align-content属性定义整个内容区域的垂直位置、

  使用grid-auto-columns和grid-auto-rows属性来设置浏览器自动创建的多余网格的列宽和行高、

  使用grid-column-start 、grid-column-end、grid-row-start、grid-row-end属性指定项目的四个边框，分贝定位在哪根网格线上、

  使用justify-self、align-self属性设置单元格内容的水平和垂直对齐方式

容器属性
display:grid;
grid-template-columns： 100px 100px 100px; /*也可以使用百分比*/
grid-template-columns： [c1] 100px [c2] 100px [c3 cc3] auto [c4];  /*使用[网格线名称]定义网格线名称*/
grid-template-rows: 100px 100px 100px； /*也可以使用百分比*/
grid-row-gap：20px； /*行间距*/
grid-column-gap: 20px; /*列间距*/
grid-gap: [grid-row-gap] [grid-column-gap]; /*省略第二个值，默认等于第一个值*/
/*在最新的标准下，上面三个属性名的grid-前缀已被删除*/
grid-template-areas:'a b c'
				   'd e f'
				   'g h i' /*相同区域名的单元格会被合并为一个区域，.可以理解为区域占位符，表示不需要使用的区域*/
grid-auto-flow: row (默认值，先行后列) | row dense（先行后列，紧密填满空格）  | column(先列后行) | column dense(先列后行，紧密填满空格)；
justify-items： start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: [align-items] [justify-items];
justify-content:start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | strecth | space-around | space-between | space-evenly;
palce-content: [align-content] [justify-content];
gird-template：[grid-template-columns] [grid-template-rows] [grid-template-areas];
grid: [grid-template-rows] [grid-template-columns] [grid-template-areas] [grid-auto-rows] [grid-auto-columns] [grid-auto-flow];
项目属性
grid-column-start: 1;
grid-column-end:2;
grid-row-start:1;
grid-row-end:2;
justify-self:start | end | center | stretch;
align-self: start | end | center | stretch;
place-self: [align-self] [justify-self];
快捷方法
- repeat（重复次数，重复值）/*方法用于书写重复值*/，如：grid-template-columns:repeat(重复次数，重复值)；
- repeat（重复次数，pattern）/*书写重复模式*/，如：grid--template-rows：repeat（2，100px 20px 80px）;
- repeat（auto-fill，100px）/*自动填充项目，值为100px*/
- fr关键字表示倍数关系，如grid-template-columns：1fr 2fr，表示第二列的列宽是第一列的2倍
- minmax()函数产生一个长度范围，表示长度就在这个范围之中，如：grid-template-columns：1fr 1fr minmax(100px,1fr);
- auto关键字表示由浏览器自己决定长度, 如： grid-template-columns： 100px auto 100px; /*左右各100px，中间自适应*/