网格布局（栅格布局）

通过对容器绘制二维网格线，划分单元格

声明容器

块级容器

display: grid;

行级容器

display: inline-grid;

划分行列

grid-template-rows /* 划分行 */
grid-template-columns /* 划分列 */

固定宽度

grid-template-rows: 100px 100px; /* 划分两行 行高 100px 100px */
grid-template-columns: 100px 100px 100px; /* 划分三行 列宽 100px 100px 100px*/

百分比

grid-template-rows: 50% 50%;
grid-template-columns: 25% 25% 25% 25%;

重复设置

grid-template-rows: repeat(2, 50%); /* 重复划分两次 每次划一行 行高 50% */
grid-template-columns: repeat(2, 50%); /* 重复划分两次 每次划一列 列宽 50% */

grid-template-rows: repeat(2, 50% 50%); /* 重复划分两次 每次划两行 行高 50%  50% */
grid-template-columns: repeat(2, 100px 50px); /* 重复划分两次 每次划两列 列宽 100px 50px */

自动填充

grid-template-rows: repeat(auto-fill, 100px 50px); /* 重复次数自动 但必须以 100px 50px 为一组 */
grid-template-columns: repeat(auto-fill, 100px 20px); /* 重复次数自动 但必须以 100px 20px 为一组 */

比例划分

grid-template-rows: 1fr 2fr;
grid-template-columns: 100px 1fr 2fr;

自动空间

grid-template-rows: repeat(2, 1fr);
grid-template-columns: 20vw auto 30vw;

值	描述
none	未设置尺寸。在需要时创建行。
auto	行的尺寸取决于容器的大小以及行中项目内容的大小。
max-content	根据行中的最大项目设置每行的尺寸。
min-content	根据行中的最小项目设置每行的尺寸。

组合定义

grid-template 属性是以下属性的简写属性：

• grid-template-rows
• grid-template-columns
• grid-template-areas

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

区域命名

grid-template:
      '栅格名称 栅格名称 栅格名称 栅格名称' 行高
      '栅格名称 栅格名称 栅格名称 栅格名称' 行高
      '栅格名称 栅格名称 栅格名称 栅格名称' 行高 / 第一列列宽 第二列列宽 第三列列宽 第四列列宽;

grid-template:
      'header header header header' 80px
      'nav main main aside' auto
      'footer footer footer footer' 50px/100px auto 50px 60px;

minmax

grid-template-rows: 100px minmax(100px, 1fr); /* 行高在 最小100px ~ 最大1fr 间取值 */
grid-template-columns: 100px 1fr;

栅格间距

行间距

row-gap: 30px; /* 行间距30px */

列间距

column-gap: 20px; /* 行间距20px */

组合定义

gap: 20px 10px; /* 行间距20px 列间距10px */

栅格线命名

默认命名

行：从上到下

列：从左到右

依次以数字123...命名

独立命名

grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
/* 
	第一行的上边线：r1-start
	第一行的下边线和第二行的上边线：r1-end r2-start
	第二行的下边线和第三行的上边线：r2-end r3-start
	第三行的下边线：r3-end]
*/
grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-start c3-start] 100px [c3-end];

自动数字命名

grid-template-rows: repeat(3, [r-start] 100px [r-end]);
grid-template-columns: repeat(3, [c-start] 100px [c-end]);

获取时需要在自动命名后面添加空格数字如：

1：第一条线

2：第二条线

grid-row-start: r-start 2;
grid-column-start: c-start 2;
grid-row-end: r-start 2;
grid-column-end: c-end 2;

自动区域命名

通过一下划分区域

grid-template-areas: "header header header header"
"nav main main aside"
"footer footer footer footer";

会给区域的栅格线自动命名

区域名-start、区域名-end方式给栅格线命名

栅格线定位

以元素左上角为起点

以元素右下角为结束点

栅格线默认数字编号

grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 4;

自命名栅格线

grid-row-start: r1-end;
grid-column-start: c2-start;
grid-row-end: r3-start;
grid-column-end: c3-start;

自动数字栅格线

grid-row-start: r-start 2;
grid-column-start: c-start 2;
grid-row-end: r-start 2;
grid-column-end: c-end 2;

偏移量定位

默认偏移量为1

grid-row-start: 2;
grid-column-start: 2;
grid-row-end: span 1;
grid-column-end: span 1;

定位简写

行开始结束简写

grid-row: 2/4; /* grid-row-start: 2; grid-row-end:4 */

列开始结束简写

grid-column: 2/4; /* grid-column-start: 2; grid-column-end:4 */

行列开始结束简写

grid-area:1/1/1/1 /* grid-row-start/grid-column-start/grid-row-end/grid-column-end */

区域定位

通过划分行列时，给单元格命名（系统自动根据单元格名字给栅格线命名）区域名-start、区域名-end方式给栅格线命名

给单元格命名时整个区域必须是矩形

区域划分

display: grid;
grid-template-rows: 80px 1fr 50px;
grid-template-columns: 100px 1fr 50px 60px;
grid-template-areas: "header header header header"
"nav main main aside"
"footer footer footer footer";

元素占据指定的区域

grid-area: header;

这样就可以让元素占据第一行

区域占位

不知道给区域取什么名字时用.占位

grid-template-areas: "top . ."
            "top . ."
            "bottom bottom bottom";

划分简写

不在通过grid-template-rows和grid-template-columns划分区域，再给单元格命名。而是直接指定单元格

grid-template:
      '栅格名称 栅格名称 栅格名称 栅格名称' 行高
      '栅格名称 栅格名称 栅格名称 栅格名称' 行高
      '栅格名称 栅格名称 栅格名称 栅格名称' 行高 / 第一列列宽 第二列列宽 第三列列宽 第四列列宽;

display: grid;
grid-template:
      'header header header header' 80px
      'nav main main aside' auto
      'footer footer footer footer' 50px/100px auto 50px 60px;

指定区域

子元素指定占据区域

grid-area: main-start/main-start/main-end/main-end;

区域简写

grid-area: main;

排列方式

行排列

grid-auto-flow: row; /* 默认 */

列排列

grid-auto-flow: column;

空单元格填充

行填充

填充前，子元素所在单元格上面有空单元格时，子元素会去填充空单元格

grid-auto-flow: row dense;

列填充

填充前，子元素所在单元格左边有空单元格时，子元素会去填充空单元格

grid-auto-flow: column dense;

对齐方式

单元格对齐

单元格没有充满栅格容器时才有用

水平对齐

justify-content

值	说明
start	容器左边
end	容器右边
center	容器中间
stretch	撑满容器
space-between	第一个栅格靠左边，最后一个栅格靠右边，余下元素平均分配空间
space-around	每个元素两侧的间隔相等。所以，栅格之间的间隔比栅格与容器边距的间隔大一倍
space-evenly	栅格间距离完全平均分配

垂直对齐

align-content

值	说明
start	容器顶边
end	容器底边
center	容器垂直中间
stretch	撑满容器
space-between	第一个栅格靠左边，最后一个栅格靠右边，余下元素平均分配空间
space-around	每个元素两侧的间隔相等。所以，栅格之间的间隔比栅格与容器边距的间隔大一倍
space-evenly	栅格间距离完全平均分配

组合简写

place-content: <align-content> <justify-content>

单元格内元素对齐（整体）

水平对齐

justify-items

值	说明
start	元素对齐栅格的左边
end	元素对齐栅格的右边
center	元素对齐栅格的中间
stretch	水平撑满栅格（默认）

垂直对齐

align-items

值	说明
start	元素对齐栅格的顶边
end	元素对齐栅格的底边
center	元素对齐栅格的垂直中间
stretch	垂直撑满栅格（默认）

组合简写

place-items: <align-items> <justify-items>

单元格内元素对齐（单个）

水平对齐

justify-self

值	说明
start	元素对齐栅格的左边
end	元素对齐栅格的右边
center	元素对齐栅格的中间
stretch	水平撑满栅格（默认）

垂直对齐

align-self

值	说明
start	元素对齐栅格的顶边
end	元素对齐栅格的底边
center	元素对齐栅格的垂直中间
stretch	垂直撑满栅格（默认）

组合简写

place-self: <align-self> <justify-self>