以下都是写在父元素(grid容器上)
1、grid容器
添加了grid布局的容器默认是块元素。
可以添加display:inline-grid; 改变成为行内块元素。
改变格子排列方向
grid-auto-flow:column;
处理格子的流动方式(了解)
grid-auto-flow:dense; //可以把多余空间占满
控制内容在容器格子内的排列方式
控制格子的排列,和flex一样,写在父元素上,水平居中、贴边等……,垂直居中、底部对其等……,控制单个元素 justify-self、align-self。
组合简写:place-contenr、place-items、单个控制place-self
2、grid分布格子的几种方法
按要求大小分布格子,可以用px、百分比% 单位:
- grid-template-rows: 100px 100px 100px; 一行分3个格子,每个盒子占100px。
- grid-template- columns: 100px 100px 100px; 一列分3个格子,每个盒子占100px。
- grid-template-rows: 50% 50%; 一行分2个格子,每个盒子占grid容器的50%。
- grid-template- columns: 25% 25% 25% 25%; 一列分4个格子,每个盒子占grid容器的25%。
自动平均分布(自适应容器):
- grid-template-rows:repeat(3,1fr); 一行分3个格子,每个盒子占grid容器的1份。
- grid-template- columns:repeat(3,1fr); 一列分3个格子,每个盒子占grid容器的1份。
repeat()函数可以重复执行,例如:
- grid-template-rows:repeat(2,100px 50px);
- ‘2’的意思是执行2次。此时一行分布了4个盒子
- 第一行100px
- 第二行50px
- 第三行100px
- 第四行50px
自动平均分布,按比例(自适应容器):
- grid-template-rows:20px 2fr 20px; 一行分3个格子,1、3号格子宽度20px,2号格子占剩余空间。
- grid-template-columns:20px 2fr 20px; 一列分3个格子,1、3号格子宽度20px,2号格子占剩余空间。
自动平均分布,并且限制子盒子最小最大宽高:
- grid-template-rows:repeat(2,minmax(50px,100px)); 一行分2个格子,子盒子最小50px,最大100px。
3、grid容器行、列控制格子间距:
row-gap:10px 每行栅格线10px。
Columns-gap:10px 每列栅格线10px。
gap:20px 10px 每行20px,每列10px。