Grid布局

display:grid;

列宽

grid-template-colums

grid-template-colums: 20px 20px 20px;   //这样就会把列分成3份每份20px

grid-template-colums:repeat(3,20px);  //跟上面是一样的效果 3是三份，20px是每份20px

grid-template-colums:1fr 1fr 1fr;  //平分父元素分为三份

//属性：auto-fill //自动填充（将一行沾满到无法排列的时候换行）
//minmax最大最小值
​
grid-template-colums:repeat(auto-fill,150px)
grid-template-colums:repeat(auto-fill,minmax(150px,1fr)) 

行高

grid-template-rows/grid-auto-rows

grid-template-rows:第一行 第二行 第三行 第......;  //每一行都可以设定高度

grid-auto-rows:auto(默认高度)/100xp(指定高度);  //可以同时设定每一行为默认高度或者是指定高度

注意：grid-template-rows的优先级要高于grid-auto-rows，当grid-template-rows有高度的时候grid-auto-rows设定的高度是不会生效的

行缝隙列缝隙

行缝隙

grid-row-gap:20px; //每个小盒子行缝隙20px

列缝隙

grid-colum-gap:20px; //每个小盒子列缝隙20px

简写形式

gap: 20px;   //当只有一个属性值得时候代表列和行的缝隙是一样的  有两个属性值的时候 gap:20px 30px;  第一个代表列第二个代表行

按网格线和区域写法

grid-colum-start/grid-colum-end

grid-colum-start:1; grid-colum-end:3;  //列的线1到线3
grid-colum-start:1; grid-colum-end:2; //列的线1到线2

grid-colum-start/grid-colum-end简写形式

grid-colum:1/3;
grid-colum:1/2;

注意：当只有一个间距的时候可以只写前面的数 例如：grid-colum:2/3;可以简写成grid-colum:2;

grid-row-start/grid-row-end

grid-row-start:1; grid-row-end:3;  //列的线1到线3
grid-row-start:1; grid-row-end:2; //列的线1到线2

grid-row-start/grid-row-end简写形式

grid-row:1/3;
grid-row:1/2;

注意：当只有一个间距的时候可以只写前面的数 例如：grid-row:2/3;可以简写成grid-row:2;

上面的方式也可以用区域的写法(在父元素要有确定有几列)

给指定元素定义区域名

 grid-area:header;
 grid-area:content;
 grid-area:sidebar;
 grid-area:footer;

在父元素中利用grid-template-area来指定元素的位置

grid-template-area:
"header header"
"sidebar content"
"footer footer"
;