全面搞懂Grid布局!

什么是grid布局?

flex布局是轴线布局,是能指定项目针对轴线的位置,可以看做是一维布局,Grid布局则是将容器划分为行和列,产生单元格,然后指定容器所在的单元格,可以看作是二维布局(兼容不如flex);

fr为了方便表示比例关系,网格布局提供了fr关键字(fraction-片段)

容器属性:

grid-template-*

需要多少行多少列,就填写相应属性值的个数,不填写,自动分配

//三行三列

grid-template-rows:10px 80px 100px;

grid-template-columns:100px 100px 100px;

grid-template-columns:repeat(3,100px);

//根据外侧盒子自动填充

grid-template-columns:repeat(auto-fill,100px);

//宽度平分为四份

grid-template-columns:repeat(10,1fr);

//设置最小值与最大值

grid-template-column:1fr minmax(100px,1fr);

//auto

grid-template-column:1fr auto 1fr;

//网格线

grid-template-column:[c1] 1fr [c2] 1fr [c3] 1fr;

行间距,列间距:

grid-row-gap/row-gap:20px;

grid-column-gap/column-gap:20px;

gap:20px 20px;

grid-template-areas:

一个区域由单个或多个单元格组成;

区域的命名会影响到网格线,每个区域的起始网格线会自动命名为区域名-start,终止网格线自动命名为区域名-end

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';

项目内使用grid-area配合到达指定区域

grid-area:a;

grid-area: rowX / columnX / rowY /coulmnY;

grid-auto-flow:子元素的排放顺序

grid-auto-flow:row/column dense;

justify-items(水平方向)/align-items(垂直方向):

设置单元格内容的水平和垂直的对齐方式 | place-items

star | end | center | stretch

项目单独设置对齐方式:justify-self/align-self/place-self

grid-column/grid-row:指定item的具体位置,根据在哪根网格线

grid-column-star:1;

grid-column-end:3;

grid-column:1/3;

grid-row-star:1;

grid-row-end:3;

grid-row:1/3;

span:跨行

grid-row:span 3;